I am working on a layout with 4 columns, each containing images of different sizes followed by a hover effect with an absolutely positioned mask.
The width of the mask is currently exceeding the width of the images.
Is there a way to ensure that the mask always matches the width of the image?
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;
}
}