Closed Caption para imagenes con CSS y Jquery

el
Las imagenes se han vuelto un icono de la iternet pues le dan mejor presentación a un sitio web dependiendo de como las usen.
El siguiente tutorial es de Fearlessflyer.com, si usas un sitio web en donde su modo de programacion es distinto a Blogger, como Wordpress premium entonces este tutorial es más facil de seguir en ese sitio.
Este tipo de Closed Caption viene con texto de estilos geniales hechos con la tecnologia de Google Web Fonts.

Para usar este truco en la imagenes, todas las imagenes tendrán el mismo alto y ancho y poner esa altura en la parte de color purpura, recuerda que height:++px es el alto, ejemplo: height:300px. Debes poner el mismo numero en las dos partes indicadas y el ancho es parte roja width:++px ejemplo width:200px.

Pretty Hover Effects.
  • Ve a Plantilla, luego a Edicion de HTML.
  • Luego busca la etiqueta ]]></b:skin> y encima de ella pega lo siguiente.
/* Pretty Hover CSS Document - fearlessflyer.com */
div.wrapper{width:209px; height:250px; overflow:hidden; position:relative; }
/*generic style for all div */
.caption0 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
.ccap {height:250px;}
/*white fade*/
.caption1 {font-family:'Reenie Beanie',arial; font-weight:bold; font-size:34px; letter-spacing:-2px; position:relative; text-align:center; padding:55px 15px 15px 15px; background:url(//lh3.googleusercontent.com/-qdYtIotKwzk/UJLxAUb_NxI/AAAAAAAAAHk/5Y82NC7EZqQ/s1600/caption-bg.png) repeat-x; min-height:125px; color:#d20000; text-shadow:0 1px 1px #999; text-transform:capitalize; line-height:16px;}
/*city*/
.caption2 {font-family: arial; font-weight:bold; font-size:26px; position:relative; text-align:center; padding:45px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-SxMxLsZvOHM/UJLxAyulF2I/AAAAAAAAAH0/fAm9xb-6MTA/s1600/city.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #999; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*wood*/
.caption3 {font-family: Georgia, arial; font-weight:bold; font-size:24px; font-style:italic; position:relative; text-align:center; padding:35px 15px 15px 15px; background:url(//lh5.googleusercontent.com/-d-7xEr5vNQw/UJLxB2esusI/AAAAAAAAAII/RkJa8ezuxjs/s1600/wood.png); min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; letter-spacing:-1px; text-transform:capitalize; line-height:16px;}
/*grass*/
.caption4 {font-family:'Droid Sans', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:15px; background:url(//lh3.googleusercontent.com/-ZIKc1y7F2zQ/UJLxAbugz4I/AAAAAAAAAHo/RaJR5L6495A/s1600/grass.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #000; text-transform:capitalize; line-height:30px;}
/*w*/
.caption5 {font-family:'Lobster', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:38px 15px 15px 15px; background:url(//lh6.googleusercontent.com/-Z-zZGdwb-rM/UJLxAzUN_FI/AAAAAAAAAH4/C_O60KHw9Js/s1600/green.png) repeat-x; min-height:125px; color:#fff; text-shadow:1px 2px 1px #ff4e00; text-transform:capitalize; line-height:16px;}
/*grungy*/
.caption6 {font-family:'IM Fell English SC', arial; font-weight:bold; font-size:30px; position:relative; text-align:center; padding:35px 0 0 0px; background:url(//lh6.googleusercontent.com/-Tk7rT3Gc2Cw/UJLxBX2blOI/AAAAAAAAAIA/MasvakdBEg4/s1600/grunge.png); min-height:125px; color:#fff;   line-height:30px; letter-spacing:-2px;}
  • Ahora busca la etiqueta </head> y encima de ella pega lo siguiente.
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=IM+Fell+English+SC' rel='stylesheet' type='text/css'/><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/><script type="text/javascript" src="http://dl.dropbox.com/u/53097108/ihojosestudios/example/jquery-1.8.2.min.js"/>
<script type="text/javascript">
// IJ tutorials //<![CDATA[
    $(document).ready(function(){                                 
        var thumbs = $(".ccap1");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption1\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption1').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption1').animate({top:"85px"}, 100);
        }     
        );
        var thumbs = $(".ccap2");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption2\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption2').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption2').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap3");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption3\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption3').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption3').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap4");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption4\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption4').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption4').animate({top:"85px"}, 100);
        }     
        );
       var thumbs = $(".ccap5");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption5\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption5').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption5').animate({top:"85px"}, 100);
        }     
        ); 
       var thumbs = $(".ccap6");     
     
        for (var i = 0, ii = thumbs.length; i < ii; i++){
            if (thumbs[i].title && thumbs[i].title.length > 0)
            {         
                var imgtitle = thumbs[i].title;     
                $(thumbs[i]).wrap('<div class="wrapper" />').             
                after('<div class=\'caption6\'>' + imgtitle + '</div>').
                removeAttr('title');
                                         
            }                 
        }
                 
    $('.wrapper').hover(
        function(){
            $(this).find('img').animate({opacity: ".6"}, 300);     
            $(this).find('.caption6').animate({top:"-85px"}, 300);         
        },
        function(){
            $(this).find('img').animate({opacity: "1.0"}, 300);                 
            $(this).find('.caption6').animate({top:"85px"}, 100);
        }     
        ); 
    });
//]]>
</script>
  • Guardas los cambios.
  • Ahora cuando hagas una entrada o pongas un gadget y quieras poner una imagen con un closed caption, puedes usar cualquiera de los siguientes codigos.
Ejemplo en vivo, edita los detalles que quieras en CSS y mira el resultado en vivo
Ejemplo:
<img class="ccap ccap1" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo2:
<img class="ccap ccap2" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo3:
<img class="ccap ccap3" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo4:
<img class="ccap ccap4" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo5:
<img class="ccap ccap5" src="URL de la imagen" title="Texto del clased caption" />
Ejemplo6:
<img class="ccap ccap6" src="URL de la imagen" title="Texto del clased caption" />

Dificultad: Media
Contenido: IMG-CSS, Jquery.min.1.8.2
Licencia: Free
Modificado: FUTUdownloads
Fuente: fearlessflyer.com