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

Not possible I have other content in the div except the image. — MartinZPetrov
– MartinZPetrov, Commented Oct 22, 2015 at 13:29
@AdamAzad A little more about your idea please? I have content (others divs buttons etc). Do you mean to place to other div above my divs with z-index or something? — MartinZPetrov
– MartinZPetrov, Commented Oct 22, 2015 at 13:34

Adam Azad · Accepted Answer · 2015-10-22 13:45:57Z

1

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>

answered Oct 22, 2015 at 13:45

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MartinZPetrov Over a year ago

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.

Sebastian Brosch · Accepted Answer · 2015-10-22 13:34:58Z

1

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>

answered Oct 22, 2015 at 13:34

Sebastian Brosch

43.8k15 gold badges78 silver badges89 bronze badges

1 Comment

MartinZPetrov Over a year ago

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.

Collectives™ on Stack Overflow

Change a div`s background image when hover over the image

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related