When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but remain transparent.
body {
background-color: aqua;
}
#circle1, #circle2 {
position: relative;
float: left;
height: 50px;
width: 50px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 0;
background-color: white;
}
#pill1, #pill2 {
position: relative;
float: left;
height: 50px;
width: 100px;
border-radius: 25px;
margin-left: 8px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 1;
background-color: white;
}
#pill2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
#circle2 {
box-shadow: 0 4px 8px 0 rgba(180, 180, 180, 1), 0 6px 20px 0 rgba(200, 200, 200, 1);
}
@keyframes animation {
0% {right: 0px;}
100% {right: 58px;}
}
#pill1:hover, #pill2:hover {
animation: animation 0.5s linear forwards;
}<div id="circle1"></div>
<div id="pill1"></div>
<div id="circle2"></div>
<div id="pill2"></div>I forgot to mention that this is supposed to be animated. I initially set it up as a transition which did not work properly. Now I have corrected it so that it functions as an animation instead.
The image on the right demonstrates the desired outcome, with maximum opacity achieved.