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.
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.
ARCHIVO HTML
<!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>ARCHIVO 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 });
});
});ARCHIVO CSS
/* 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;
}
