イメージのホバーコンテンツのウィンドウサイズ変更を避けるサイズ変更

Question

hello guysイメージとテキストをフェードアウトするホバー効果で構成されたウェブサイトをデザインしています。それはかなりうまく動作していますが、ブラウザウィンドウのサイズを変更すると混乱し、イメージはまだ配置されていますが、ホバーコンテンツはサイズ変更されます。サイズ変更時にイメージと同じサイズにしたいだけです。 この混乱のいずれかの方法は、任意の答えは感謝していただきありがとうございます。

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です。

可能であれば絶対配置の使用を最小限に抑えることは良いことです。 （私はトップを調整し、マージントップ及びマージン左に左理由です）

あなたが適切な

希望を見るように、これは

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>

に役立つCSSの数値を調整します

EDIT：（画像を拡大したスニペット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/