Its handy for child element that uses absolute position for positioning within parent <div> which has background image. Use position: absolute, and percentage height and width (instead of typical exact pixel), to avoid major breakpoints implementation, which what px lack at.
<div class="parent-with-background-image">
<div class="child-with-absolute-position"></div>
</div>
<style>
.child-with-absolute-position {
position: absolute;
background: transparent;
width: 50%;
@media (min-width: 1024px) {
height: 284px;
}
height: 9%;
margin-top: 52%;
margin-left: 46%;
&:hover {
background: rgba(255, 255, 255, 0.5);
}
}
</style>