Como colocar legenda nas imagens do blog

Views:
 Código CSS:

.imgteaser {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
   
  }
  .imgteaser a {text-decoration: none;}
  .imgteaser a:hover {cursor: pointer;}
  .imgteaser a img {
    background-color: #ffffff; /* cor da borda da imagem, altere se desejar*/
    border: none;
    margin: 0;
  padding-left: 4%;   /* distância da imagem em relação à lateral, altere se precisar*/
  }

  .imgteaser a .more {
    background-color: #222; /* cor de fundo da legenda, altere se desejar*/
    color: #ffffff; /* cor da fonte da legenda, altere se desejar*/
    font-family: Arial !important; /* tipo de fonte da legenda, altere se desejar*/
    font-size: 14px; /* tamanho da fonte da legenda, altere se desejar*/
    text-shadow:0 1px #fee; /* cor da sombra do texto*/
    padding: 5px 10px;
    width: auto;
    /* transparência */
    filter:alpha(opacity=85); /* IE genérico */
    opacity:.85; /* Firefox */
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=85)'; /* IE8 */
    position: absolute;
margin-top: -35px; /* altura da legenda em relação à imagem, altere se precisar*/
margin-left: 10%;  /* distância da legenda em relação à imagem, altere se precisar*/
     }


Código HTML:

<div class="imgteaser">
  <a href="AQUI VOCÊ COLOCA O LINK SE DESEJAR">
    <img src="URL DA IMAGEM" />
    <span class="more">&raquo; AQUI VOCÊ COLOCA O TEXTO DA LEGENDA</span>
  </a>
</div>



Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage