Change a div`s background image when hover over the image
Question
I have the following code:
<!DOCTYPE html> <html >
<head>
<style type="text/css">
.imgBox {background: url(lock75.png) no-repeat; }
.imgBox:hover {background: url(lock75light.png) no-repeat; }
</style>
</head>
<body>
<div style="width:200px; height:200px; border:1px solid;" class="imgBox"> </div>
</body>
</html>
My images are 75x75 and the problem occurs that when I hover over the border the image changes, I want when hovering over the image to change the image.
Note: I need a html construction similar to this one.
EDIT
I forgot to mention that I need the picture to be centralized above the other divs which I have not a certain space for the picture.
Thanks
2 answers
solution1
1 2015-10-22 13:34:58
I think you are searching for this:
.container { border:1px solid #000; display:inline-block; height:200px; width:200px; } .imgBox { background:url(http://placehold.it/100x100) no-repeat; height:75px; width:75px; } .imgBox:hover { background:url(http://placehold.it/75x75) no-repeat; }
<div class="container"> <div class="imgBox"> </div> </div>
solution2
1 ACCPTED 2015-10-22 13:45:57
You need to have a container that can hold both the background image and your content in the following structure (I know you asked for something similar to what you have posted, but it's not possible; well it is but it will involve CSS3 elements and jQuery)
Here's the setup
body { padding:10px; } .img-box { max-width:200px; width:100%; border:1px solid #ddd; } .img-box .img { width:200px; height:200px; background: url(https://unsplash.it/200/200/?image=876) no-repeat; border-bottom:1px solid #ddd; } .img-box .img:hover { background: url(https://unsplash.it/200/200/?image=876&blur) no-repeat; } p { margin:5px }
<div class="img-box"> <div class="img" ></div> <p>other content here</p> </div>
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.