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.