HTML CSS Exercise: Image cross effect with CSS3 transition

Last update on March 04 2024 06:50:47 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8><!-- Define the character encoding of the document as UTF-8 -->
<title>Image cross effect with CSS3 transition</title><!-- Set the title of the HTML page -->
<style type="text/css">
/* CSS styles start here */

.changer img { transition: 1s ease-in-out; } /* Apply a CSS transition to all images inside elements with the class "changer" */

img.step1, div.changer:hover img.step2 { opacity: 1.0; } /* Set the opacity of images with class "step1" and images inside a hovered ".changer" div with class "step2" to fully visible */

.changer:hover img.step1, img.step2 { opacity: 0; } /* Set the opacity of images inside a hovered ".changer" div with class "step1" and images with class "step2" to fully transparent */

/* CSS styles end here */
</style>
</head>
<body>
<div class="changer">
<img class="step1" style="position: absolute;" src="https://www.w3resource.com/html-css-exercise/pic1.png" alt=""><!-- First image with class "step1" and positioned absolutely -->
<img class="step2" src="https://www.w3resource.com/html-css-exercise/pic2.png" alt=""><!-- Second image with class "step2" -->
</div>
</body>
</html>

Explanation:

This HTML and CSS code combination creates an image cross effect using CSS3 transitions.
The CSS transition property is applied to all images inside elements with the class "changer". This transition will occur over a duration of 1 second with an ease-in-out timing function.
Images with the class "step1" and images inside a hovered ".changer" div with class "step2" will have their opacity set to 1. This makes them fully visible when displayed.
Images inside a hovered ".changer" div with class "step1" and images with class "step2" will have their opacity set to 0. This makes them fully transparent when displayed.
The use of the :hover pseudo-class allows for the transition effect to occur when the mouse hovers over the ".changer" div.

Live Demo :

See the Pen css-transition-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes