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
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments