html - 避免图像悬停内容在窗口调整大小时调整大小

Question

大家好，我正在设计一个网站，该网站由图像和淡出文本的悬停效果组成。它工作得很好但是当我调整浏览器窗口大小时它变得一团糟，图像仍然定位但悬停内容调整大小我只希望它与调整大小的图像大小相同。 解决这个问题的任何方法，感谢任何答案。

figure {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

figure:hover img {
  transition-duration: 0.8s;
}

figure figcaption {
  position: absolute;
  top: 0;
  left: 20px;
  width: 90% !important;
  height: 95%;
  opacity: 0;
  transition-duration: 0.8s;
  color: #000;
}

figure:hover figcaption {
  opacity: 1;
}

.styleme {
  background: #fff;
  font-family: playball;
  margin-top: 36%;
  height: 80px;
}

<div class="row">
  <div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
    <div class="thumbnail">

      <figure>
        <img class="img-responsive" src="macbookair11_lifestyle_20.jpg" />
        <figcaption>
          <div class="styleme">
            <p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> justclick to purchase</p>
            <p>Proccessor: works at 3.14Ghz</p>
            <p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

Answer 1

显然，如果您想让图片占满页面的大部分，您的图片就必须非常大。为了演示目的，我使用了一个小图像并适当调整大小。

我所做的主要区别是使用 display:block 和 position:relative。

最好尽可能减少绝对定位的使用。 (这就是为什么我将顶部和左侧调整为 margin-top 和 margin-left 的原因)

根据需要调整 css 中的数字

希望对你有帮助

figure {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

figure:hover img {
  transition-duration: 0.8s;
}

figure figcaption {
  display:block;
  position: relative;
  margin-top: 0;
  margin-left: 20px;
  width: 400px !important;
  height: 450px;
  opacity: 0;
  transition-duration: 0.8s;
  color: #000;
}

figure:hover figcaption {
  opacity: 1;
}

.styleme {
  background: #fff;
  font-family: playball;
  margin-top: 10%;
  height: 80px;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
    <div class="thumbnail">

      <figure>
        <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSs87UCUOVgNUoz7-AlLppXgeDyC1DnITzZjk6xMJN4P94oMps1" />
        <figcaption>
          <div class="styleme">
            <p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> justclick to purchase</p>
            <p>Proccessor: works at 3.14Ghz</p>
            <p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

编辑:(带有较大图像的片段 2)

*{margin:0; padding:0;}
.thumbnail{
   background: #fff;
}
figure img{
  width:90%!important;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}

figure:hover img {
  transition-duration: 0.8s;
}

figure figcaption{
  display:block;
  position: relative;
  opacity: 0;
  transition-duration: 0.8s;
  color: #000;
}

figure:hover figcaption {
  opacity: 1;
}

.styleme {
  background: #fff;
  font-family: playball;
  padding-top: 5%;
  padding-left: 20px;
  width:90%;
  height:10%;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
    <div class="thumbnail">

      <figure>
        <img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmGtZotDeGTAe1MOM1QZ-g6HfFnBCE3ASqsoUcSmfcMgHLPSOMyw" />
        <figcaption>
          <div class="styleme">
            <p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> just click to purchase</p>
            <p>Processor: works at 3.14Ghz</p>
            <p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

https://jsfiddle.net/RachGal/4yqLeey9/