Question

我正在创建一个响应式图像网格。目前，每个框中都有相同的图片，但我想创建一个蒙版，以便在所有框中显示该图像，而不是在每个框中重复。有点像这样：http://ptgmedia.pearsoncmg.com/images/chap3_032133065x/elementLinks/082fig02.jpg

我还想在每个盒子上创建一个翻转效果，当它翻转时，它会显示一个完全不同的图片，就在那个盒子里。

如果适用，请提前感谢您的帮助。

div.grid {
  font-size: 0;
  width: 95%;
  margin: 30px auto;
  font-family: sans-serif;
}

a.grid {
  font-size: 16px;
  overflow: hidden;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
    clip: 
}

a.grid:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a.grid {
    width: calc(25% - 6px);
  }
  
  a.grid:nth-of-type(2n) {
    margin-right: 8px;
  }
  
  a.grid:nth-of-type(4n) {
    margin-right: 0;
  }
}

a.grid:hover img {
  
}

figure {
  margin: 0;
}

img.grid {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  background: #ccc;
  transition: transform .2s ease-in-out;
}

.p a {
  display: inline;
  font-size: 13px;
  margin: 0;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 100px;
}

<div class="grid">
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
  <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
    <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
    <a class="grid" href="#">
    <figure>
      <img class="grid" src="https://static.pexels.com/photos/7613/pexels-photo.jpg" alt="">
    </figure>
  </a>
</div>

Answer 1

如果我找对你，你会尝试这样做：

编辑：修正了有缺陷的悬停，并且项目保持正方形。

＆＃13;

html, body{
  width:100%;
  height:100%;
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.grid{
  width:calc(60vw + 30px);
  display:inline-block;
  position:fixed;
  background-color:lightgray;
  perspective:1000px;
}
.griditem{
  display:block;
  width:20vw;
  margin:5px;
  height:20vw;
  float:left;
}
.front{
  width:100%;
  height:100%;
  background:#fff url('http://www.popsci.com/sites/popsci.com/files/styles/large_1x_/public/import/2013/images/2013/03/bluemarble_1.jpg?itok=-IIyWZZX') no-repeat;
  background-attachment:fixed;
  background-position: top left;
  background-size:cover;
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
  cursor:pointer;
}
.back{
  width:100%;
  height:100%;
  transform:rotateY(180deg);
  background:#fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
  background-size:cover;
  backface-visibility:hidden;
  transition:.4s ease-in-out;
  position:absolute;
  top:0;
  z-index:2;
}
.griditem:hover .front{
  transform:rotateY(180deg);
  transition:.4s ease-in-out;
}
.griditem:hover .back{
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
}

＆＃13;

<div class="grid">
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
</div>

＆＃13;

使用不同的图片翻转图像网格

1 个答案: