Avoiding an image hover content from resizing on windows resize - html

Question

hello guys I am designing a website which consist of an image and a hover effect which fades out a text. it is pretty working fine but it became a mess when i resized the browser window, the image is still positioned but the hover content resizes i just want it to be the same size with the image on resize.
Any way out of this mess, any answer is appreciated thanks.
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

Evidently, your image must be very large if you want it to fill most of the page. I have used a small image and sized appropriately for demo purposes.
The key difference I made was to use display:block and position:relative.
It's good to minimise the use of absolute positioning where possible. (That's why I adjusted the top and left to margin-top and margin-left)
Adjust the numbers in the css as you see appropriate
Hope this helps
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>
EDIT: (snippet 2 with larger image)
*{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/