7

Tengo un div con ancho y largo fijo. Lo esperado sería que al pasar sobre este div, se muestre una imagen con una transición en una posición absoluta definida.

Estoy usando solo CSS3 y Html. Entiendo que debo usar la propiedad hover, pero no puedo lograr el resultado esperado.

#hoverarea {
  background-color:red;
  width: 100px;
  height: 100px;
}

#machine {
  

}
<div id="hoverarea">

</div>


<div id="machine">

  <img src="http://opensourceecology.org/w/images/3/3a/Metal_Roller.png">

</div>

https://jsfiddle.net/LilNawe/n2f7pnbf/

2
  • No comprendo. De que forma o con que efecto quieres que aparezca la imagen? Y sobre cual de los dos div, al hacer hover, quieres que aparezca la imagen?
    – Einer
    Commented el 5 sept. 2017 a las 13:06
  • Es decir, lo ideal seria que al pasar por el div, la imagen aparezca en la posición absoluta que yo le defina.
    – nawelittle
    Commented el 5 sept. 2017 a las 13:30

4 respuestas 4

11

Una manera de hacerlo utilizando solamente css:

  • Colocar la imagen dentro de un div contendor con ancho fijo (en este caso #hoverarea con 100 x 100)
  • Darle a la imágen un ancho maximo y minimo del 100% para que ocupe el tamaño del contenedor (esto es importante para el efecto del hover)
  • Darle una opacidad de 0 a la imágen para que no sea visible
  • Setear en la pseudoclase :hover de la imágen opacity:1, de esta manera al ingresar al div se visualiza la imágen. Cómo la imágen y el div tienen el mismo tamaño se produce el efecto deseado.
  • Mediante transition especificamos en que propiedad queremos aplicar la transición y con que duración. En este caso la propiedad sería opacity

#hoverarea {
  background-color:red;
  width: 100px;
  height: 100px;
}

img {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 2s;

}

img:hover {
 opacity: 1;  
}
<div id="hoverarea">
<img src="https://www.venturestream.co.uk/wp-content/uploads/2016/09/Square-300x300.jpg">
</div>


  

Puedes leer sobre transitions aquí: W3schools - Transitions

En el siguiente link se puede visualizar las distintas curvas de velocidad de transition W3schools - Transitions speed

Para la respuesta he utilizado el valor por defecto, el cual es ease y especifica que el comienzo de la transición será lenta, luego incrementará y culminará lentamente.

8
  • Genial, me orienta mucho. ¿Como puedo hacer que tenga una transición?
    – nawelittle
    Commented el 5 sept. 2017 a las 13:11
  • He editado la respuesta incluyéndolo Commented el 5 sept. 2017 a las 13:12
  • Me sucede que si la imagen supera el tamaño del div, aparece cuando paso sobre ella, es decir, necesito que se muestre solo cuando pasa sobre el div, no sobre ella.
    – nawelittle
    Commented el 5 sept. 2017 a las 13:21
  • En mi respuesta la imágen esta contenida en un div y toma como tamaño máximo el del div contenedor, por lo tanto esa situación en teoría no podria suceder. ¿Que es lo que has probado? Commented el 5 sept. 2017 a las 13:22
  • Poniendole a la imagen una posicion absoluta, aparece cuando paso sobre la imagen, no sobre el div.
    – nawelittle
    Commented el 5 sept. 2017 a las 13:31
8

Puedes usar Javascript. Aplicando los eventos mouseenter y mouseleave sobre el DIV agregas o quitas una clase a la imagen. Despues desde CSS manejas las transiciones que quieras.

var 
hovearea = document.getElementById('hoverarea'), // Div
machine = document.getElementById('machine'); // Img

/** Agrego y Quito la clase 'show' */
hovearea.addEventListener('mouseenter', function(){
  machine.classList.add('show');
  
  /** IE Support */
  //machine.className += ' show';
  
});

hovearea.addEventListener('mouseleave', function(){
  machine.classList.remove('show');
  
  /** IE Support */
  //machine.className = machine.className.replace(/\bshow\b/, '');
  
});
#hoverarea {
  background-color:red;
  width: 100px;
  height: 100px;
}

#machine {  
  opacity: 0;
  transition: opacity 1s;
}

#machine.show {
  opacity: 1;
}
<div id="hoverarea">

</div>


<div id="machine">

  <img src="http://opensourceecology.org/w/images/3/3a/Metal_Roller.png">

</div>

2
  • Como sería en Javascript o TypeScript?, no quiero utilizar Jquery.
    – nawelittle
    Commented el 7 sept. 2017 a las 13:50
  • ahí cambié la respuesta utilizando solo javascript Commented el 7 sept. 2017 a las 14:02
3

Usando solo CSS3 y HTML5 podrías usar el selector + que selecciona elementos adyacentes.

Por defecto a la imagen le añadirías una opacidad de 0 para que no se viera y le establecerías una transición con los segundos que quisieras que empleara en realizar la transición.

Por último, estableceríamos la opacidad a 1 en el elemento #machine cuando hagamos hover sobre el elemento #hoverarea utilizando el selector +.

Ejemplo:

#hoverarea {
  background-color:red;
  width: 100px;
  height: 100px;
}

#machine{
  opacity: 0;
  transition: opacity 2s;
}

#hoverarea:hover + #machine {
  opacity: 1;
}
<div id="hoverarea"></div>

<div id="machine">
  <img src="http://opensourceecology.org/w/images/3/3a/Metal_Roller.png">
</div>

5
  • 1
    Interesante! Creo que esta debería ser la respuesta aceptada ya que el OP manifiesta que la div no tiene porque contener a la imágen. Commented el 5 sept. 2017 a las 15:13
  • Esta correcto. Tengo un solo problema, yo tengo un mapa y cuando paso por arriba del div me debería aparecer una imagen en el lateral izquierdo, de esta manera solamente me deja mostrar 1solo div, los demás no funcionan.
    – nawelittle
    Commented el 7 sept. 2017 a las 13:49
  • 1
    @nawelittle, eso lo puedes hacer con este mismo ejemplo pero en vez de usar id para mostrar la imagen usa una clase que se muestre y ya lo tienes
    – Edu3D
    Commented el 7 sept. 2017 a las 14:31
  • @Edu3D a que id te referis? #hoverarea:hover sería .hoverarea:hover??
    – nawelittle
    Commented el 7 sept. 2017 a las 17:26
  • @nawelittle Eso es, tendrías que aplicar la clase a todos los div que quisieras que mostraran la imagen. Sin embargo, tienes que tener en cuenta que tienen que ser elementos adyacentes, ya que si no el selector no los seleccionará. Commented el 7 sept. 2017 a las 21:17
0

Podrías probar también con esto:

#hoverarea {
background-color:red;
width: 100px;
height: 100px;
}
#hoverarea:hover{
background-image: url("imagen.png");
}
#machine {


}

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.