Menu
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
582
asked Nov 25 '25 02:11
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
