Advertisement:
Read Later
In this tutorial, I will show you how to make a disappearing image effect in plain and simple CSS to improve the user experience.
The
Align the image at the horizontal center by using the display property and the margin property.
By using the transition property and the hover pseudo-selector, adjust opacity, width, and height values of the image gradually.
------------CSS----------------
#disappearing{display:block;width:80%;height:auto;border:2px solid white;opacity:1;margin:auto;transition:2s;cursor:pointer;}
#disappearing:hover{width:10%;opacity:0;transition:5s;}
------------HTML----------------
<img src="demo.jpg" id="disappearing" />
Result: