Div with background of 100% scale of image and hoverable button over it with 100% area of div and centered text

I have a complicated case. But probably not complicated for you.

I have module called catsocial which will contain four social media images with specific dimensions (300x400) in one row which should be 100% of website width. Each 25%, so 4 DIVs will be 100%.

Each of these "images" was placed in module called catig for Instagram, catyt for YouTube, etc.

Inside social media module I wanted to have personal image which will fill the DIV with width: 100% and height: 100% of that image. Because I searched a lot here - I found that the only way is to just place an image with specified dimensions inside DIV and then it will fit my DIV completely.

This problem I solved. But I have to place a link <a href=""></a> which will be fulfilled with this main DIV (here: catig) with also width: 100% and height: 100% of that DIV but over an image.

Another problem is that this link (inside DIV: catigbut) should be displayed on hover only.

The last problem is that text (here: INSTAGRAM) should be centerr vertically and horizontally.

I have a code that image displays properly, catigbut displays properly with also width: 100% and height: 100% of that DIV but unfortunately I can't vertically place INSTAGRAM text in that div anymore...

.catsocial {
  margin: 50px 0;
}

.catig {
  width: 25%;
  float: left;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  position: relative;
}

.catigimg {
  width: 100%;
}

.catigbut {
  position: absolute;
  top: 0px;
  left: 0px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.catigbutlink {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}
<div class="catsocial">
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
  <div class="catig">
    <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
    <div class="catigbut">
      <a href="#" class="catigbutlink" target="_blank">
        <h4 class="catigbutlinktitle">INSTAGRAM</h4>
      </a>
    </div>
  </div>
</div>

I will be so thankful for help - how to make this text centered vertically. But if there is any bug inside code, please let me know, because I am thinking about it over 3 days and can't find a solution...

here is a screenshow I was asked for

2 answers

  • answered 2018-01-13 17:37 Bhuwan

    Set position: absolute of .catigbutlink and try to use transform for vertical align center. And for hover set opacity:0 default and set opacity:1 on hover

    body {
      font: 13px Verdana;
    }
    
    .catsocial {
      margin: 50px 0;
    }
    
    .catig {
      width: 25%;
      float: left;
      background-repeat: no-repeat !important;
      background-size: 100% auto !important;
      position: relative;
    }
    
    .catigimg {
      width: 100%;
    }
    
    .catigbut {
      position: absolute;
      top: 0px;
      left: 0px;
      text-align: center;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all .3s ease;
    }
    
    .catigbutlink {
      top: 0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ff000069;
      margin: auto;
      display: flex;
    }
    
    .catig:hover .catigbut {
      visibility: visible;
      opacity: 1;
    }
    
    .catigbutlink h4 {
      margin: 0;
      color: white;
      margin: auto;
    }
    <div class="catsocial">
      <div class="catig">
        <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
        <div class="catigbut">
          <a href="#" class="catigbutlink" target="_blank">
            <h4 class="catigbutlinktitle">INSTAGRAM</h4>
          </a>
        </div>
      </div>
      <div class="catig">
        <img class="catigimg" src="https://butterflyplace-ma.com/img/Monarch.png" />
        <div class="catigbut">
          <a href="#" class="catigbutlink" target="_blank">
            <h4 class="catigbutlinktitle">INSTAGRAM</h4>
          </a>
        </div>
      </div>
    </div>

    I hope this will help you!

  • answered 2018-01-13 17:37 Quito Guillermos

    I took out some of your code.

    I did a flex-box design for easy centering. There is a very good tutorial on flex-box here. This centers (vert. and horiz.) the Instagram link. I had to add a div to center the anchor tag. Let me know if there is something else you wanted.

    <!DOCTYPE HTML>
    
    <html>
     <head>
      <style>
       .catsocial {
         width: 100%;
         height: 300px; //you mentioned each picture is 300 height
         margin: 50px 0;
       }
    
       .catig {
         width: 25%;
         height: 100%;
         background-image: url('https://butterflyplace-ma.com/img/Monarch.png');
         background-repeat: no-repeat !important;
         background-size: 100% 100% !important;
       }
    
       .catigbut {
         width: 100%;
         height: 100%;
         display: flex; /*flex-box design for easy centering*/
         justify-content: center; /*center horizontally*/
         align-items: center; /*center vertically*/
       }
      </style>
     </head>
    
     <body>
      <div class="catsocial">
       <div class="catig">
        <div class="catigbut">
         <div class="Added to make display:flex work">
          <a href="#" class="catigbutlink" target="_blank">
           <h4 class="catigbutlinktitle">INSTAGRAM</h4>
          </a>
         </div>
        </div>
       </div>
      </div>
     </body>
    </html>