Concept

Cross-fade is a smooth transition between photos. To get cross-fading between two photos, position one photo on top of the other (by absolute/fixed position) and gradually reduce the opacity from 100% to 0 of the top image.

Use JavaScript to get more photos cross-faded.

Code

Look in the HTML and CSS Code:

• image2 is located on top of the image1 (written after image 1 in the HTML and both have absolute position).
• On hover of the demo-block area, the top image (image2) gets the opacity of 0. This allows us to see image1 behind it. The transition of opacity is smooth, since transition property is defined in the CSS of the image.