Estuve buscando este tema pero no lo encontre asi que lo publico.
Estoy intentando hacer unas animaciones sobre unas secciones de mi pagina con CSS y jQuery.
Publico aqui el codigo de ejemplo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="js/jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".contenedor").mouseover(function(){
$(".grow").each(function(i){
$(this).css({
"transform": "scale(1.2)",
"opacity":"0.3",
});
});
});
$(".contenedor").mouseleave(function(){
$(".grow").each(function(i){
$(this).css({
"transform": "scale(1)",
"opacity":"1",
});
});
});
});
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.contenedor{
background: black;
display: block;
height: 211px;
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: center;
width: 197px;
}
.grow { transition: all .5s ease-in-out; }
.texto{
color: #ffae00;
font-size: 40px;
font-weight: lighter;
position: absolute;
top: 40%;
width: 100%;
z-index: 10;
}
</style>
</head>
<body>
<div class="contenedor">
<p class="texto">NATURALEZA</p>
<img class="grow" src="img/01.jpg">
</div>
</body>
</html>
Lo que hace es que aumenta el tamaño de la imagen con una transicion dentro de un div que tiene overflow:hidden.
Mi problema es que cuando duplico el div contenedor el efecto no se aplica solo soble el elemento $(this) si no sobre todos los demas divs creados.
Espero alguien pueda sugerirme alguna cosa.
Desde ya gracias.
