How to display text over responsive image by css - html

Question

I have 4 columns in which I have images with different sizes followed by a absolutely positioned mask, appearing on hover.
The width of mask exceeds the images
How can I set the mask always the same width as the width of the image?
https://jsfiddle.net/tsjzrmra/2/
HTML
<div class="wrap"><div class="row">
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/120X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/150X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/180X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
CSS
* { box-sizing: border-box; }
.wrap{
width: 87%;
margin: auto;
padding: 0 10px;
background-color: rgba(255,255,255,0.9);
overflow: hidden;
box-shadow: 0 0 5px #eee;
}
img{
max-width: 100%;
height: auto;
}
[class*='col-']{
float:left;
}
.col-1-3{
width: 33.33%;
padding: 20px;
}
.col-2-3{
width: 66.66%;
padding: 20px;
}
.col-1-4{
width: 25%;
padding: 10px;
}
.show{
width:100%;
height: 100%;
border: 1px solid rgba(0,0,0,0.04);
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
display: block;
border-radius: 4px;
}
.show .mask{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.show-first .mask {
opacity: 0;
background-color: rgba(0,0,0, 0.4);
transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
opacity: 1;
}
#media only screen and (max-width: 767px){
.col-1-4{
width: 50%;
padding: 10px;
overflow: hidden;
clear: right;
}
.wrap{
width: 100%;
margin: auto;
overflow: hidden;
}
.mobile-clear{
clear:both;
}
}

Answer 1

Add a div wrapper around the content:
<div class="show show-first">
<div class="mask-wrapper">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
then update the CSS
.mask-wrapper: {
position: relative;
display: inline-block;
}
.show {
text-align: center;
}
.mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
img {
max-width: 100%; // it's better to change it into a class instead
}

Answer 2

Answer
You may simply remove this definition:
width: 100%;
and edit this one
display: block;
into
display: inline-block
for <div class="show">. Also if you want the <div class="show">s to have center aligned, you need to add
text-align: center;
to <div class="col-1-4">.
In action:
* {
box-sizing: border-box;
}
.wrap{
width: 87%;
margin: auto;
padding: 0 10px;
background-color: rgba(255,255,255,0.9);
overflow: hidden;
box-shadow: 0 0 5px #eee;
}
img{
max-width: 100%;
height: auto;
}
[class*='col-']{
float:left;
}
.col-1-3{
width: 33.33%;
padding: 20px;
}
.col-2-3{
width: 66.66%;
padding: 20px;
}
.col-1-4{
width: 25%;
padding: 10px;
text-align: center;
}
.show{
height: 100%;
border: 1px solid rgba(0,0,0,0.04);
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
display: inline-block;
border-radius: 4px;
}
.show .mask{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.show-first .mask {
opacity: 0;
background-color: rgba(0,0,0, 0.4);
transition: all 0.4s ease-in-out;
}
.show-first:hover .mask {
opacity: 1;
}
#media only screen and (max-width: 767px) {
.col-1-4{
width: 50%;
padding: 10px;
overflow: hidden;
clear: right;
}
.wrap{
width: 100%;
margin: auto;
overflow: hidden;
}
.mobile-clear{
clear:both;
}
}
<div class="wrap">
<div class="row">
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/100X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
<div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/120X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div><div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/150X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div><div class="col-1-4">
<div class="show show-first">
<img src="http://placehold.it/180X200" />
<div class="mask">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi sequi laboriosam delectus ipsa, vel nulla ipsum quod esse molestias nam quos eius. Reprehenderit repellat atque voluptas autem velit, distinctio esse.
</div>
</div>
</div>
</div>
</div>

Answer 3

try this script,
$('.show').hover(function(){
var getimg = $(this).find('img').width();
//alert(getimg);
$('.mask').css({'width':getimg})
});
Try this Demo