0

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>

8
  • Puedes colocar el código que estás utilizando, no se si fue que no entendí o que pero en el link que envías todo funciona correctamente Commented el 4 oct. 2017 a las 21:26
  • mis disculpas, mal link:
    – Oren Diaz
    Commented el 4 oct. 2017 a las 21:33
  • jsfiddle.net/yy9Rr/42
    – Oren Diaz
    Commented el 4 oct. 2017 a las 21:33
  • Las imágenes están mal ruteadas, no se ven, debes alojarlas en un sitio donde se pueda acceder a ellas por medio del link directo Commented el 4 oct. 2017 a las 21:36
  • Ahi edite el codigo.
    – Oren Diaz
    Commented el 4 oct. 2017 a las 21:43

1 respuesta 1

0

Para resolver tu problema debes hacer lo siguiente:

#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;
  z-index: 100;
}


/*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 > img:hover + .mask 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*/

#principal .box > img:hover{
  -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>

Espero que te sirva, saludos !

8
  • Recortando la imagen no soluciona el problema porque el div mask tiene un tamaño fijo de width: 200px height: 212px;
    – Oren Diaz
    Commented el 4 oct. 2017 a las 22:34
  • Justamente esa es la idea que el otro div sea mas grande, para hacer el efecto de zoom. El problema es que div mask actua como hover tambien y no deberia pasar eso.
    – Oren Diaz
    Commented el 4 oct. 2017 a las 22:34
  • Ah comprendo, ya te edito la respuesta entonces había entendido mal ! Commented el 4 oct. 2017 a las 22:41
  • Ya te edité la respuesta Commented el 4 oct. 2017 a las 22:45
  • Gracias Camilo! xD Ayudandome ya por segunda vez con mis problemas!
    – Oren Diaz
    Commented el 4 oct. 2017 a las 22:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.