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>