Tengo el siguente problema con la animacion donde dejas el cursor en la imagen mas chica y aparece la segunda mas grande:
Mi imagen 1: "perla" es mas chica que la imagen 2 (la 1 tiene hover en css)
La imagen 2: "flores" es mas grande y supuestamente no deberia tener el hover.
Pero en mi css funcionan las 2 con el hover, cosa que no deberia pasar.
Solo quiero apuntar a la imagen 1 para que se inicie HOVER.
Alguna idea? link editado http://jsfiddle.net/yy9Rr/44/
/*div BOX*/
#principal .box {
width: 10%;
border-radius: 60%;
cursor: default;
text-align: center;
position: absolute;
top: 63%;
left: 40%;
/*1er puntero box*/
}
/*1er imagen dentro del box*/
#principal .box img {
width: 60%;
/*size imagen principal*/
height: 60%;
}
#principal img {
left: 10px;
margin-left: -10px;
position: relative;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
/*2do div MASK*/
#principal div.mask {
width: 200px;
height: 212px;
position: absolute;
top: -70%;
left: -20%;
overflow: hidden;
}
#principal h2 {
/*margin: 20px 0 0 250px;
position: relative;*/
}
#principal .box .mask h2 {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
#principal .box:hover h2 {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/*modificacion de la imagen Pre - on hover*/
.box:hover>img {
-webkit-transform: scale(-1);
-moz-transform: scale(-1);
-o-transform: scale(-1);
-ms-transform: scale(-1);
transform: scale(-1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=70);
opacity: 0.0;
}
/*2da imagen despues de on hover - su tamaño original*/
#principal .box .mask h2 .nueva {
width: 100%;
height: 100%;
}
<div id="principal">
<div class="box">
<img src="https://i.imgur.com/v707VXF.png" class="pre" />
<div class="mask">
<h2><img src="https://i.imgur.com/k2miQmk.png" class="nueva" /></h2>
</div>
</div>
</div>