Looking to spice up the appearance of the div element that holds the product's image, SKU, and price. Adding a hover effect to the main container causes the child divs to inherit it, resulting in separate hover effects on each child div.
Sample HTML for each main container:
<div class="maincontainer">
<div class="imgbox" >
<img src="G-Shock.png" alt="gshock">
</div>
<div class="skubox">
<p>
G-Shock Watch
</p>
</div>
<div class="pricebox">
<p>
$500.00
</p>
</div>
</div>
Sample CSS for main container and its children:
.maincontainer{
width:350px;
position: relative;
padding:2%;
flex-grow:1;
flex-basis:16%;
}
.imgbox{
height:218px;
width:218px;
margin:0 auto;
}
.skubox{
height:72px;
width:160px;
margin:0 auto;
text-align:center;
position:relative;
padding-top:1px;
}
.pricebox{
height:22px;
width:80px;
margin:0 auto;
text-align:center;
position:relative;
padding-top:1px;
}
p{
margin:0;
padding:0;
text-align:center;
position:relative;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size:13px;
}
.maincontainer :hover{
box-shadow: 0 0 11px;
}