在重疊圖像上應用 CSS Animation

Question

我試圖在CISO 網站 header 上實現這個 animation 。 我創建了一個小提琴，展示了我能夠實現的目標，但似乎有些不對勁。

 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>

我正在使用引導框架來對齊圖像。

Answer 1

只需添加此 css

.flex-fill{
  display:inline-block;
  width:33%;
}
    img:not(:hover) {
  transition: none;
}