私はさまざまなサービスのリストを提供していますが、各サービスにはイメージ、見出し、説明があります。私はそれを設定して、画像をマウスのホバーで1.3倍の大きさにするようにしました。スケーリングは機能しますが、スケーリングは親の境界を無視します。画像が親の枠の外に拡大するのを防ぐにはどうすればいいですか?
私は実際にどのように見えるのGIFをキャプチャしました。ここで
私が働いているコードです。
.cleaningservices {
max-width: 250px;
max-height: 250px;
}
/* Default state of the image */
.hover01 img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
/* Scale the image to 1.3 it's size on mouse hover */
.hover01:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="cleaningservices">
<div class="col-sm-6 col-md-4">
<div class="thumbnail hover01">
<img src="https://bosworthco.com/wp-content/uploads/2016/10/cleaning-268134_960_720.jpg" alt="deep house cleaning">
<div class="caption">
<h3>Deep Cleaning</h3>
<p>Usually, on our first visit we will most likely have to complete a deep cleaning. It is a far more intensive cleaning that our regular cleaning. After first deep cleaning we will continue with one of our regularly scheduled cleanings below.</p>
</div>
</div>
</div>
</div>
</div>
どのような変更は、私は画像をマウスのホバーに親の国境の内側に拡張するために作成する必要がありますか?
'overflow:hidden; on parent? –
倍率を小さくします。 – connexo
オーバーフローを与える:隠し;親に –