Question

所以我正在尝试创建一个带有文本悬停的投资组合。我试图让它对引导程序有一点反应，但是当你缩小时，我无法正确判断图像在div中的位置。

我真的想得到这样的东西（https://www.weblounge.be/en/）

高100％，宽度100％，以便在调整大小时始终显示图像的完整尺寸。

我想我做错了但找不到问题。

我的建设是

  <div class="col-lg-4 col-sm-6 nopad">
    <div class="box">
      <img src="http://i.imgur.com/DuUtNax.jpg">
      <div class="overlay">
        <h5>Random website</h5>
        <p class="text">Random text</p>
      </div>
    </div>
  </div>

和css

.container {
  background-color: #fff;
  padding: 100px 0px 100px 0px;
  .nopad {
    padding-left: 0px;
    padding-right: 0px;
  }
  .box {
    cursor: pointer;
    height: 400px;
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: left;
    img {
      position: absolute;
      width: 100%;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
    }
    .overlay {
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      left: 0;
      z-index: 100;
      opacity: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      text-align: center;
      padding-top: 20%;
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
      h5 {
        color:#fff;
        opacity: 0;
        transition-delay: 0.1s;
        transition-duration: 0.2s;
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
      }
      p {
        color: #fff;
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.2s;
        transform: translateY(60x);
        -webkit-transform: translateY(60px);
      }
      .button-white {
        opacity: 0;
        transition-delay: 0.2s;
        transition-duration: 0.2s;
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        margin: 0px;
      }
    }
    &:hover img {
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
      transform: scale(1.05);
    }
    &:hover .overlay {
      opacity: 1;
      h5 {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
      }
      p {
        opacity: 1;
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
      }
    }
  }
}

我的codepen显示错误：http://codepen.io/denniswegereef/pen/MwJXde

Answer 1

您需要将产品图像用作产品div中的背景图像：

<div class="box">
    <div class="product-image" style="background-image: url(http://i.imgur.com/DuUtNax.jpg)"></div>
    ...
</div>

然后将您的CSS从.box img更改为.box .product-image：

.box {
    .product-image {
        position: absolute;
        width: 100%;
        height:100%;
        -webkit-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
        background-repeat: no-repeat;
        background-size: cover;
    }

    &:hover .product-image {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
}

http://jsfiddle.net/8pfjdmb4/

缩略图网格图像调整大小问题

1 个答案: