How to make a hover on just specific div inside div? - html

Question

I'm working on a template using Bootstrap. I have a little problem with my CSS hover. I just make a hover on div inside div.
This fiddle show my problem: https://jsfiddle.net/iklas/q5Lm7cLe/
When I hover on thumbnail the hover is showing on all parent div product-box.
I want when I hover on product-box the hover showing on just thumbnail div.
How can I solve this problem?

Answer 1

Just add position: relative; to .thumbnail
Updated fiddle

Answer 2

When You hover on thumbnail the hover is showing on all parent beacause you haven't give the css property Position:relative to .thumbnail.
.product-box a {
color: #666;
}
.product-box a:hover {
color: #666;
text-decoration: none;
}
.thumbnail {
position: relative;
}
.thumbnail:hover:before {
background-color: #000;
width: 100%;
height: 100%;
display: block;
position: absolute;
content: "";
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0.5;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
<div class="container">
<div class="row">
<div class="product-box col-md-3 col-sm-4 col-xs-12">
<a href="#">
<div class="thumbnail">
<img src="http://dummyimage.com/100x250/bdbdbd/fff&text=image" alt="...">
</div>
<div class="caption">
<h4 class="product-title">SheIn Grey Contrast Collar Long Sleeve Pleated Dress</h4>
<h4 class="brand-name pull-left"><span>By</span> Day Dresses</h4>
<h4 class="price-number pull-right">$34.56</h4>
<div class="clearfix"></div>
</div>
</a>
</div>
<!-- /.box-product -->
</div>
</div>

Answer 3

Your transition is not working because you haven't used this.
Try this is would work.
.thumbnail:before {
content: "";
transition: all 600ms linear 0s;
}
.thumbnail:hover:before {
background-color: #000;
width: 100%;
height: 100%;
display: block;
position: absolute;
content: "";
top: 0px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0.5;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}