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:
Live Demo :
See the Pen css-transition-answer by w3resource (@w3resource) on CodePen.
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4