css - 如何在淡入淡出过渡之前使轮播图像稍微缩放

Question

我正在为一个类(class)建立一个网站，我喜欢网页 www.sweetgreen.com 并且他们的图像在淡入淡出过渡之前似乎略微缩放。我得到了淡入淡出，但它很快并且没有优雅地做到这一点。不过，我大概可以弄清楚这一点，我想知道如何实现轻微的缩放效果，我已经检查了该元素，并在我的 Rails 应用程序的 Bootstrap 样式表中应用了一些具有细节的类。这是我的分区

 `<div class="item">
     <%= link_to image_tag("carousel_img2.jpeg", :size => "1600x200", :alt =>
     "Slide2"), {:class => "img-responsive center-block", :alt => "Responsive  
      image"} %>
      <div class="carousel-caption text-center">

        </div>

Answer 1

我已经做了一个清晰的demo:https://jsfiddle.net/wyvguf25/

而这个是基于 Bootstrap3 的:https://jsfiddle.net/q0rgL8ws/

第一个是使用opacity。对于使用 display

的 Bootstrap