css - Bootstrap 4 溢出隐藏在卡片布局内不起作用，而动画持续时间

Question

我在卡片布局中有图像。我正在尝试在鼠标悬停图像上实现缩放图像。当我将鼠标悬停在图像动画上时，开始缩放图像。而动画持续时间图像从父包装器溢出。动画完成后，它会隐藏图像的溢出区域并显示缩放图像。

HTML

<div class="card-columns">
    <div class="card">
        <div class="image-wrapper">
            <img class="card-img-top img-fluid" src="image-url" />
        </div>

        <div class="card-body">
            card body ...
        </div>
    </div>
</div>

CSS

.image-wrapper{
    width : 100%;
    overflow : hidden;
    display : block;
}

.card-img-top{
    transition: all .3s ease-in-out;
}

.card-img-top:hover {
    transform: scale(1.5);
}

Answer 1

运行这段代码

.card-img-wrap {
  overflow: hidden;
  position: relative;
}
.card-img-wrap img {
  transition: transform .25s;
  width: 100%;
}
.card-img-wrap:hover img {
  transform: scale(1.2);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    

<div class="container">        	
   <div class="col-lg-3">
    <div class="card" >                    
      <div class="card-img-wrap">
        <img class="card-img-top img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" />          
      </div>                                    
      <div class="card-block">
	<p class="card-text">Card Body..</p>
      </div>              
    </div>
   </div>
      
</div>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>