How to make a disappearing image effect in CSS

Keywords

Definition

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 CSS data type represents a two-dimensional image. There are two kinds of images: plain images, referenced with a , and dynamically-generated images, generated with or element(). Additional CSS image functions include image(), image-set(), and cross-fade(). Images can be used with numerous CSS properties, such as background-image, border-image, content, cursor, and list-style-image.

Code

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: