Parent div's hover attribute doesn't affect child image? - html

Question

I have a parent div with two child divs inside of it, one with an image and one with just text. I've assigned a :hover style to my parent class so that when a user hovers the entire div gets an inset shadow... however when I test it, the child that contains the image either is not affected or is on top of the effect..
Is there a way to get the :hover style to affect the image as well?
updated fiddle
edit: updated the fiddle with empty div to illustrate desired effect...
css:
.main-box {
border:2px solid #656565;
}
.main-box:hover {
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
.image {
display:inline-block;
}
.text {
display:inline-block;
}
<div class="main-box">
<div class="image">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQM2EEo-JUTyhdaFxM3UCMvTM-yotCWzz_v6XeCL6RIYMdY4ZjJ" />
</div>
<div class="text">asdfasfda;lskjf</div>
</div>

Answer 1

The solution to this is actually not too far from what you have, simply change your CSS to say
.main-box:hover img {
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
and the effect should be what you are looking for.
Updated fiddle to show results
EDIT:
The best solution for this problem would be to add a :hover:before element in your CSS. This will create new content above the div on the page for as long as the user's mouse is over the div in question, and by giving it an absolute position and z-index, all effects you add to the box will show above the contents of the hovered div.
The following CSS will give you what you want:
.main-box:hover:before {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.3) inset;
}
The problem with this method is that the :before content is now effectively covering everything in the div; any links, input fields or buttons you would want the user to be able to select are now rendered useless.
While pointer-events would be the easiest way of getting through this new overlay, it has terrible browser compatibility, so I would recommend the following:
.main-box a, .main-box input { position: relative; z-index: 3; }
// etc.
Doing this for all links, text or inputs you would want your users to be able to select should be clickable, and this solution should be compatible on all browsers.
Newer fiddle