Question:
Create a page that will display an image changing effect on mouse over in a file named imgeffect.html.
Initially the page would be displayed as below with only an image of apple (apple.jpg)
When we mouse over this image a transition effect on the image needs to happen, changing the image from apple to mango (mango.jpg). The page then should display as below,
Create a webpage using the fields below:
A <div> tag, with “step1” as class.
- The width and height are 250px and 300px respectively.
- Initially, it must appear with the image “apple” with a 100px margin.
For the transisition, change the CSS3 properites of the div tag named as “step1” to
- Width as 350px, height as 300px and change the image from apple to mango with the same margin value.
- Note: Please Don’t use short hand styles with respect to background.
CODE:–
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.step1{
width:250px;
height:300px;
background-image: url("https://quizforexam.com/wp-content/uploads/2020/10/apple.jpg");
background-repeat: no-repeat;
margin:100px;
}
.step1:hover{
width:350px;
height:300px;
background-image:url("https://quizforexam.com/wp-content/uploads/2020/10/mango.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="step1"></div>
</body>
</html>