How do I do the image mouse hover effect?
Question
How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpg when you hover over myImage.jpg . I attempted to find help elsewhere but was unsuccessful.
3 answers
solution1
2 ACCPTED 2016-04-03 00:08:31
You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* { box-sizing: border-box; padding: 0; margin: 0; } .container { position: relative; width: 600px; height: 400px; margin-left: 50px; } .container:hover img:nth-of-type(2) { opacity: 1; } .container img { position: absolute; top: 0; left: 0; width: 600px; height: 400px; transition: opacity 1s ease-in-out 0s; } .container img:nth-of-type(1) { opacity: 1; } .container img:nth-of-type(2) { opacity: 0; }
<div class="container"> <img src="https://placeimg.com/600/400/animals" /> <img src="https://placeimg.com/600/400/people" /> </div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!
solution2
1 2016-04-03 00:01:51
If you can add both images into a <span> tag or so, you could do this:
span img:last-child { display: none; } span:hover img:first-child { display: none; } span:hover img:last-child { display: inline-block; }
<span> <img src="http://lorempixel.com/300/150/sports/1"> <img src="http://lorempixel.com/300/150/sports/2"> </span>
Or, use a pseudo element for the second image.
span:hover img { display: none; } span:hover:after { content: url("http://lorempixel.com/300/150/sports/2"); }
<span> <img src="http://lorempixel.com/300/150/sports/1"> </span>
See this jsFiddle for an example of some basic fade in/out effects.
solution3
0 2016-04-02 23:46:21
In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.