How can I make the pink color div move vertically in front of the currently hovered div when we hover on it? Any suggestions on how to achieve this effect?
https://i.sstatic.net/yfwgf.png
$(document).ready(function() {
$(".timeline-entry").hover(function(e) {
e.preventDefault();
$('.timeline-entry.current').removeClass('current');
$(this).addClass('current');
});
});.timeline {
position: relative;
display: flex;
flex-direction: column;
}
article {
width: 100px;
height: 50px;
background: red;
}
.timeline-entry.right-aligned {
align-self: flex-end;
background: blue;
}
.timeline-entry.left-aligned {
float: left;
}
.timeline:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 50px;
background: pink;
}
/* .timeline-entry:hover .timeline:nth-child(1) .timeline:after {
top: 100px;
} */
.timeline-entry.current {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="timeline">
<article class="timeline-entry right-aligned"></article>
<article class="timeline-entry left-aligned"></article>
<article class="timeline-entry right-aligned"></article>
<article class="timeline-entry left-aligned"></article>
</div>