w3resource

HTML CSS Exercise: Image cross effect with CSS3 transition

Solution:

HTML Code:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Image cross effect with CSS3 transition</title>
<style type="text/css">
.changer img { transition: 1s ease-in-out; }
  img.step1, div.changer:hover img.step2 { opacity: 1.0; }
  .changer:hover img.step1, img.step2 { opacity: 0; }
</style>
</head>
<body>
<div class="changer">
<img class="step1" style="position: absolute;" src="https://www.w3resource.com/html-css-exercise/pic1.png" alt="">
<img class="step2" src="https://www.w3resource.com/html-css-exercise/pic2.png" alt="">
</div>
</body>
</html>

Live Demo :

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


Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
YesYesYesYesYes

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

HTML-CSS: Tips of the Day

What is the mouse down selector in CSS?

button:active{
  //some styling
 }

These are all the possible pseudo states a link can have in CSS:

a:link {color:#FF0000;}    /* unvisited link, same as regular 'a' */
a:hover {color:#FF00FF;}   /* mouse over link */
a:focus {color:#0000FF;}   /* link has focus */
a:active {color:#0000FF;}  /* selected link */
a:visited {color:#00FF00;} /* visited link */ 

Ref: https://bit.ly/3KsrBWi

 





We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook