Ejemplo de efecto hover en imágenes con jQuery. Muchas veces queremos darle mucha importancia a la estética, otras veces simplemente nos gustan los pequeños detalles como animaciones de capas, de imágenes y de textos.
¿Cómo crear un efecto hover en imágenes con jQuery?
En este ejemplo os traigo un ejemplo de efecto hover en imágenes con jQuery, en el cual al pasar por encima de la imagen activamos una capa con una opacidad y un texto. Nuestro enfoque se basa en la especificación oficial de selectores CSS del W3C para garantizar compatibilidad y buenas prácticas.
¿Cuál es el código HTML necesario?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Pop Up con jQuery</title>
<link rel="stylesheet" href="css/style.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="content">
<h1>Efecto hover en imágenes con jQuery</h1>
<div class="gepic">
<a href="#" title="">
<div class="negro"><span>Super Mario Bros<em>Xbox 360</em></span></div>
<img src="images/1.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
<div class="gepic">
<a href="#" title="">
<div class="negro"><span>Call of duty 4<em>Xbox 360</em></span></div>
<img src="images/2.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
<div class="gepic">
<a href="#" title="">
<div class="negro"><span>Super Mario Bros<em>Nintendo</em></span></div>
<img src="images/3.jpg" alt="Northern Saw-Whet Owl" />
</a>
</div>
</div>
</body>
</html>
¿Cómo se implementa con jQuery?
// JavaScript Document
$(document).ready(function() {
//Al pasar sobre .gepic animamos la imágen dando un tamaño menor y mostramos el div .negro
$('.gepic').mouseenter(function(e) {
$(this).children('a').children('img').animate({ height: '240', left: '0', top: '0', width: '310'}, 150);
$(this).children('a').children('div').fadeIn(150);
$(this).children('a').children('.negro').css({ "padding-top": "80px" , "opacity" : 1 });
}).mouseleave(function(e) {
$(this).children('a').children('img').animate({ height: '280', left: '-20', top: '-20', width: '350'}, 150);
$(this).children('a').children('div').fadeOut(150);
$(this).children('a').children('.negro').css({ "padding-top": "150px" , "opacity" : 0 });
});
});
¿Qué estilos CSS se requieren?
/* CSS Document */
body{
background:#81d742;
margin:0;
}
.content{
width:1000px;
margin-top:50px;
min-height:600px;
background:#fff;
margin:0 auto;
padding:20px;
}
.gepic {
border: 3px solid #eee;
float: left;
height: 240px;
margin: 0 9px 9px 0;
overflow: hidden;
position: relative;
width: 310px;
}
.gepic:hover {
border: 3px solid #81d742;
}
.gepic a {
display: block;
position: relative;
}
.gepic a img {
height: 280px;
left: -20px;
position: relative;
top: -20px;
width: 350px;
}
.gepic .negro {
display: none;
font-size: 2.3em;
font-weight: bold;
height: 100%;
padding-top: 120px;
position: absolute;
text-align: center;
text-decoration: none;
width: 100%;
z-index: 100;
background-color: rgba(15, 15, 15, 0.6);
color: #fff;
text-shadow: #000 0px 0px 20px;
transition:0.2s;
}
.gepic .negro em {
display: block;
font-size: 0.50em;
font-weight: normal;
}
Efecto hover en imágenes con jQuery
- Al pasar el ratón sobre la imagen, se activa una capa semitransparente con texto superpuesto
- jQuery anima el tamaño y posición de la imagen cuando entra y sale el cursor
- La capa negra cambia de opacidad y espaciado interno durante la animación de hover
- El código usa mouseenter y mouseleave para detectar el movimiento del ratón sobre cada imagen
- Se pueden añadir múltiples imágenes con efectos hover usando la clase .gepic en contenedores separados
