Luke Luke -3 years ago 70
CSS Question

Group images that contains image overlay to the centre of the page

I am trying to center a group (a table with 3x3) of pictures to the center of the webpage, I manage to do it before adding image overlay to it. But since I added image overlay, the images are appearing on top left of the webpage. How do i group them and center them, also how am I supposed to get the image location so that when I set the image overlay, it goes to the specific picture as each picture will have different image overlay text.

CSS

.container {
position: relative;
width: 100px;
height: 100px;
}

.image {
display: block;
width: 100px;
height: 100px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;

}

.container:hover .overlay {
opacity: 1;
}

.text {
color: red;
font-size: 20px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}


HTML

<div style="text-align:center">
<div class="container">
<img src="wheel1.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheels2.jpg" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="wheel3.jpg" class="image"">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>


`

Answer Source

You could center it using flexbox. Change your main div

<div style="text-align-center;">
     ......
</div>

to

<div style="display: flex; flex-direction: column;align-items: center;">
    .....
</div>

And it should work.

.wrapper{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.container {
   position: relative;
   width: 100px;
   height: 100px;
}

.image {
   display: block;
   width: 100px;
   height: 100px;
   border: 1px solid red;
 }

 .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;

 }

 .container:hover .overlay {
      opacity: 1;
 }

.text {
   color: red;
   font-size: 20px;
   font-weight: bold;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 }
<div class="wrapper">
   <div class="container">
   <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
    </div>
  <div class="container">
  <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
  </div>
  <div class="container">
  <div class="image"></div>
      <div class="overlay">
          <div class="text">Hello World</div>
      </div>
  </div>
  </div>

Here is the fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download