CSS Effect – Image changing effect on mouseover

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)

Quiz for Exam - apple - CSS Effect - Image changing effect on mouseover
Quiz for Exam – apple – CSS Effect – Image changing effect on mouseover

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,

Quiz for Exam - mango - CSS Effect - Image changing effect on mouseover
Quiz for Exam – mango – CSS Effect – Image changing effect on mouseover

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:

imageeffect.html

<!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>

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *

x