缩放效果css3拉伸我的图像

Question

我想创造这种效果：

悬停时的图像变得更暗，并将其缩放一点。我有效果，但我的初始图像被拉伸。我不知道背景图像的大小，只想在用户悬停时图像变焦一点。

.highlight{
    background-size: 100% 100%;
    -moz-transition: background-size 3s ease, background-color 3s ease;
    -webkit-transition: background-size 3s ease, background-color 3s ease;
    transition: background-size 3s ease, background-color 3s ease;
}

.highlight:hover{
    background-size: 120% 120%;
    background-color:rgba(0,0,0,0);
    -moz-transition: background-size 3s ease, background-color 3s ease;
    -webkit-transition: background-size 3s ease, background-color 3s ease;
    transition: background-size 3s ease, background-color 3s ease;
}

.highlight:hover:before{
    content: "";
    display: inline;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.7);
    -moz-transition: background-size 3s ease, background-color 3s ease;
    -webkit-transition: background-size 3s ease, background-color 3s ease;
    transition: background-size 3s ease, background-color 3s ease;
}

<div class="col-xs-12 col-sm-12 col-md-6">
<div class="highlight" style="background-image:url(image-url)">
    <div class="content">
        <h3>Text</h3>
        <p class="large">More text text text</a>
    </div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="highlight" style="background-image:url(image-url2)">
    <div class="content">
        <h3>Text2</h3>
        <p class="large">More text text text2</a>
    </div>
</div>
</div>

Answer 1

这是你要找的吗？

.highlight{
  position: relative;
  height: 300px;
  background-size: 100%;
  background-position: center top;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover{
  background-size: 120%;
  background-color:rgba(0,0,0,0);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}

.highlight:before{
  content: ' ';
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;
  background-color:rgba(0,0,0,0);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}
.highlight:hover:before{
  background-color:rgba(0,0,0,0.7);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

<div class="highlight" style="background-image:url(http://lorempixel.com/1100/700/nature/2/)">
    <div class="content">
        <h3>Text</h3>
        <p class="large">More text text text</p>
    </div>
</div>