Is there a simple and elegant way to swap the background of the circle with the background of the div underneath?
I would like the circles to have the background image of div "one", while keeping div "one" invisible (not using visibility:hidden).
I am looking for a refined and straightforward solution without overcomplicating things.
This should be compatible with IE10/11 and newer versions.
.one {
position: relative;
width: 500px;
height: 300px;
background-image: url("https://ak5.picdn.net/shutterstock/videos/11223065/thumb/1.jpg");
}
.two,
.three {
position: absolute;
top: 50%;
transform: translate(0%, -50%);
left: 15px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
}
.three {
left: initial;
right: 15px;
}<div class="one">
<div class="two"></div>
<div class="three"></div>
</div>