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.
hover
, quieres que aparezca la imagen?