CSS Effect – Image changing effect on mouseover


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.


<!DOCTYPE html>
<html lang="en">
<title>Change Image on Hover in CSS</title>
<style type="text/css">
    background-image: url("https://quizforexam.com/wp-content/uploads/2020/10/apple.jpg");
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    <div class="step1"></div>
  1. Navigation Bar using CSS3
  2. Pricing Tables
  3. Book A Show – Online Ticket Booking
Sharing Is Caring

Leave a Comment