Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right.
img {
transition: all .3s ease;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
height: auto;
}
#img2 {}
#img1,
#img3 {
z-index: 3;
}
/* hover effects */
#img2:hover {
transform: scaleX(1.08);
z-index: 8;
}
#img1:hover {
transform: scaleX(1.08);
z-index: 8;
}
#img3:hover {
transform: scaleX(1.08);
z-index: 8;
}<div class="container">
<div class="d-flex bd-highlight">
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/animals" alt="" id="img1">
</div>
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/nature" alt="" id="img2">
</div>
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/arch" alt="" id="img3">
</div>
</div>
</div>Utilizing Bootstrap framework for image alignment purposes.