悬停时缩放背景图像

Zoom background image on hover

本文关键字：图像 背景 缩放 悬停      更新时间：2024-01-17

我有一个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%;
}

jsFiddle

您可以使用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>

相关文章：