CODEWITHSUNDEEP
htmlcssresponsive-designpositioncenter
ERIC
ERIC

Reputation: 63

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%;            
}

Upvotes: 0

Views: 84

Answers (4)

MRX
MRX

Reputation: 1651

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Try using this css on your .gallery-text class.

Upvotes: 0

Hitesh Misro
Hitesh Misro

Reputation: 3461

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>

Upvotes: 1

Hardy
Hardy

Reputation: 5631

.main-wrapper {
  display: table;
  width: 100%;
  background: #226699;
}

.img-holder {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 500px;
}

img {
  max-width: 90%;
  max-height: 90%;
  display: inline-block;  
}
<div class="main-wrapper">
  <div class="img-holder">
    <img src="http://placehold.it/1000x1000" />  
  </div>
</div>

Upvotes: 0

Nano Miratus
Nano Miratus

Reputation: 467

try using this:

display: flex;
justify-content: center;
flex-direction: column;
height: 100%;

on your .gallery-text-class :)

Upvotes: 0

Related Questions