如何使用CSS创建背景图像的放大效果？

Question

我有一个列表项的弹性设置来显示信息。我有一个附加到这些列表项的背景图像，但我想在鼠标悬停或聚焦时创建放大效果。我认为我部分在那里，但是我目前的设置使它们在移动屏幕上延伸。我想知道是否有办法实现我正在尝试做的那些响应。

我搜索了类似的帖子，我发现很多人都使用溢出：隐藏;使用变换比例，我似乎无法使用flex工作。任何帮助将不胜感激！

<ul>
  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>
</ul>

<filename.txt

Answer 1

更新

对于前3张图片： 为每个<div>添加了<li>，然后从.bg*中删除了<li> .classes，并将其提供给新的内部<div>。然后将overflow:hidden添加到<li>。

<小时/> 已将 transform: scale(1.3 ) 添加到*:hover规则集。 已将background-size:100% 100%更改为 background-size:cover

演示

body {
  font-family: sans-serif;
}

h2 {
  color: #3CAD5D;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 1500px;
  width: 100%;
}

li {
  display: flex;
  width: calc(33.333333% - 10px);
  overflow: hidden;
}

a {
  flex-grow: 1;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  box-shadow: 3px 3px 5px #888888;
  padding: 20px;
}

a:hover {
  color: #fff;
}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 800px) {
  ul {
    flex-direction: column;
    /* change direction of flex for mobile */
    margin: 0 auto;
  }
  li {
    width: 97%;
  }
}


/*** BG WITH ZOOM ***/

.bg1 {
  background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
  margin: 5px;
}

.bg2 {
  background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
  margin: 5px;
}

.bg3 {
  background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
  margin: 5px;
}

.bg1,
.bg2,
.bg3 {
  background-size: cover;
  /* Changed to cover */
  background-repeat: no-repeat;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.bg1:hover,
.bg2:hover,
.bg3:hover {
  transform: scale(1.3);
  /* Changed to transform:scale() */
}

<ul>
  <li>
    <div class="bg1">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>
  <li>
    <div class="bg2">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>
  <li>
    <div class="bg3">
      <a href="#">
        <h2>References</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
          ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </a>
    </div>
  </li>

  <li class="bg1">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg2">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>

  <li class="bg3">
    <a href="#">
      <h2>References</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </li>
</ul>