E. Shio E. Shio - 3 months ago 35
CSS Question

Make Code more Responsive (Text over Image)

How would you create this but with percentages instead of pixels? Basically so no matter the size of image it is always centered both horizontally and vertically. Whenever I try to create with percentages, the dark background sticks completely out the side of the image.

Codepen

HTML:

<div class="gallery">
<div class="gallery-image">
<img src="http://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />

<div class="gallery-text">

<h3>BOOM!</h3>

</div>
</div>
</div>


CSS:

.gallery {
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}

.gallery-image{
cursor:pointer;
position: relative;
display: block;
}

.gallery-text{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
background-color: rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
vertical-align:middle;
line-height:200px;
}

.gallery-text:hover{
opacity: 1;
}

.gallery-text h3{
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}

Answer

Check this snippet, Hope this will help you!

.gallery {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    position:relative;
    width:30%;
    height:30%;
    margin:10px;
}
.gallery-image1{
    position:relative;
    width:50%;
    height:50%;
}
.gallery-image img {
    width:100%;
    vertical-align:top;
}
.gallery-image:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    left:0;
    top: 0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.gallery-image:hover:after {
    opacity:1;
}
<div class="gallery">
<div class="gallery-image">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
  
  <div class="gallery-image gallery-image1">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
</div>

Comments