I am getting an error at the background-repeat attribute in actual the image has to change whenever the mouse pointer hovers over the image but it is showing the test case is failed. Tried to change it with background: "imgfile.jpg" no-repeat; but still same error is recurring. Help me with this. Thank you.
Here is the description about the code Create a page that will display an image changing effect on mouse over in a file named imgeffect.html.
Initially the page would get displayed as below with only an image of apple (apple.jpg : with no-repeat attribute set to it in the same line )
apple
When we mouse over this image a transition effect on the image needs to happen, changing the image from apple to mango (mango.jpg : with no-repeat attribute set to it in the same line )
The page then should display :
mango
Create a webpage using the fields below:
A tag, with "step1" as class.
The width and height are 250px and 300px respectively. Initially it must be appear with the image "apple" with 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.
<!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: "apple.jpg";
background-repeat: no-repeat;
margin:100px;
}
.step1:Hover
{
width:350px;
height:300px;
background-image: "mango.jpg";
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="step1"></div>
</body>
</html>
