[英]Zoom background image on hover
我有一個div的背景圖片,我想在懸停時放大,這是我正在使用的代碼
<div class="col-md-6 col-sm-6 col-xs-12 blocks" id="outfit">
<h3>Cafes and restautrents </h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has be
</p>
<a class="btn btn-default">View More</a>
</div>
CSS
#outfit{
background:url(../images/outfit-bg.png) right bottom no-repeat #DFD2C1;
color:#86A3B1;
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
#outfit:hover {
transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5); /* IE 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand'); /* IE6 and 7 */
}
這是整個div的縮放,我如何只針對該div中的背景圖像進行放大
干得好:
#outfit{
background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat ;
color:#86A3B1;
background-size: 100%;
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}
#outfit:hover {
background-size: 150%;
}
您可以使用background-size
來執行此操作,只需確保在div上設置background-size:100%
#outfit{ background:url("https://placeimg.com/500/300/animals") right bottom no-repeat #DFD2C1; color:#86A3B1; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; background-size:100%; } #outfit:hover { background-size:150%; }
<div class="col-md-6 col-sm-6 col-xs-12 blocks" id="outfit"> <h3>Cafes and restautrents </h3> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has be </p> <a class="btn btn-default">View More</a> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.