在悬停

Question

我有一个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中定位背景图像以放大效果

Answer 1

你走了：

#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

Answer 2

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