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。

尽可能减少绝对定位的使用是很好的。（这就是为什么我将顶部和左边调整到边距顶部和边距左边）

根据需要调整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/

避免图像悬停内容从调整窗口大小调整大小

1 个答案: