悬停时，Flexbox背景图像变焦

Question

我正在尝试使用flex保持响应但是有背景图像缩放创建一个三行的行，我尝试了几种不同的方法，但它没有保持响应，有没有人知道正确的方法做此？

我是相当新的flex，请原谅我的代码，我也想知道如何将其限制为每行3个，因为当我添加一个新的<li>项时，它继续填充同一行。

非常感谢任何帮助，谢谢！

body {
  font-family: sans-serif;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  max-width: 1500px;
}

li {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 31.33%;
}

a {
  display: flex;
  flex-direction: column;
  flex: 1;
  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 {
    display: inline-block;
    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;
  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 {
  -webkit-transform: scale(1.5, 1.5);
}

<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>


</ul>

Answer 1

试试这个（代码注释）：

＆＃13;

＆＃13;

body {
  font-family: sans-serif;
}

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

ul {
  margin: 0 auto;  /* centre if max-width */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;  /* add row to this */
  flex-wrap: wrap;     /* allow for extra li */
  max-width: 1500px;
  width:100%;           /* make as wide as possible */
}

li {
  display:flex;                    /* this needs flex so link will fill li */
  width: calc(33.333333% - 10px);  /* fit 3 on a row (10px is your margin) */
}

a {
  flex-grow:1;             /* grow the anchor */
  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;
  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 {
  -webkit-transform: scale(1.5, 1.5);
}

＆＃13;

<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>
</ul>

＆＃13;

＆＃13;

＆＃13;