Este es un efecto  para mostrar información de una imagen al pasar el cursor encima, se puede utilizar para agregarle atractivo a cualquier pagina, sobe todo si maneja muchas imágenes, este ejemplo esta echo para funcionar con 4 imagenes, veamos los pasos:

1.- HTML:

 Colocaremos un div por cada imagen que tendremos la cual contendrá los estilos que queremos agregar

<div class=»info c1″></div>

<div class=»info c2″></div>

<div class=»info c3″></div>

<div class=»info c4″></div>

y de igual manera insertar las imágenes que queramos:

<div class=»pic» id=»pic1″><img src=»pic1.jpg»/> </div> 

<div class=»pic» id=»pic2″> <img src=»pic2.jpg»/> </div>

<div class=»pic» id=»pic3″><img src=»pic3.jpg»/></div>

<div class=»pic» id=»pic4″> <img src=»pic4.jpg»/></div>

 

2.- CSS:

.pic{
     width: 250px;
     height: 400px;
    position:relative;
    float: left;
    border:10px black solid;
    margin-left: 20px ;
}

img {
      position : relative;
      width: 250px;
      height: 400px;
     z-index:-1;
}

le daremos un tamaño deseado a nuestras imágenes

 
.info{
height:50px;
position:absolute;
margin-left:10px;
top:-20px;
background-color:navy;
background-color: rgba(255, 0, 0, 0.2);
margin-top:160px;
text-align:center;
padding:10px 0px 0px 0px;
color:white;
font-family:»AR CHRISTY»
}

esta clase le dará nuestros estilos deseados al efecto

3.- SCRIPT

El primer paso sera esconder la información de la imagen:

$(«.c1 .c2 .c3 .c4»).hide();

Queremos que la información se despliegue al pasar el cursor del mouse, para ello obtendremos la altura (height) el ancho (width) de la imagen para adaptar nuestro efecto:

$(«.pic»).mouseover(function(){

var w = $(this).width();
var h = $(this).height();

y obtendremos el id de cada imagen como método para seleccionar la imagen con el cursor:

var ids = $(this).attr(«id»);

después, mostraremos el efecto de la información sobre la imagen:

if(ids==»pic1″){    // ids == pic2 pic 3 pic 4…
$(«.c1»).show().animate({height: h, top:-150,fontSize:5},200)
.animate({fontSize:22},2000).end();}

De la misma manera, se remueve el efecto al quitar el cursor: 

$(«.pic»).mouseleave(function(){

$(«.c1»).hide().animate({height:0, top:160,},0); } //.c2 c3 c4…..

Y listo!!. Un inconveniente de esta animación es adaptarlo acorde a otros tamaños de imagen, lo cual se puede solucionar cambiando las propiedades de las clases.