Colour Overlay On Hover - With Text

Question

I have a series of responsive boxes with background images that I'm trying to apply a hover overlay to. I want it to have text/images and a coloured background when it's hovered. On hover the background image should still be visible, but have a coloured overlay with text and a logo.

I don't want to use JS and I know there is a CSS way to do it but I can't seem to get it to work quite right with what I have. I have setup the boxes this way to make sure they are responsive - maybe there's a better way to do this?

.matrix{
     display:block;
     overflow:hidden;
}
 .matrix .item{
     float:left;
     width:25%;
     position:relative;
}
 .matrix .item a, .matrix .item.team{
     display:block;
     position:relative;
     overflow:hidden;
}
 .matrix .item img{
     display:block;
     transition:all 0.3 ease;
     width:100%;
}
 .matrix .bleed-in{
     position:absolute;
     right:150%;
     top:-150%;
     width:150%;
     height:300%;
     transition:all 0.35s ease 0.1s;
     z-index:5;
     opacity:0.9;
     transform:rotate(30deg);
}
 .matrix .item .overlay{
     display:block;
     transition:all 0.25s ease 0.1s;
     position:absolute;
     leftL0;
     top:-10px;
     width:100%;
     height:100%;
     opacity:0;
     text-align:center;
     padding:0 10%;
     z-index:9;
}
 .vertical-align{
     position:relative;
     top:50%;
     transform:translateY(-50%);
}
 .matrix .item .overlay img{
     max-height:70px;
     width:auto;
     opacity:1;
     display:inline-block;
     margin: 0 auto 25px;
     transform:none;
}
 .matrix .item h3{
     color:#fff;
     margin:0 0 6px;
     font-size:20px;
     font-weight:500;
}
 .matrix .item p{
     color:#fff;
     margin:0;
     text-transform:uppercase;
     font-size:1.6rem;
}
 @media screen and (max-width:600px){
     .matrix .item{
         width:100%;
         float:none;
    }
}
 @media screen and (max-width:1024px){
     .matrix .item{
         width:50%;
    }
}

<section class="matrix bkg-grey">
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
   <article class="item" style="background-color: #0058cf">
      <a href="#">
         <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
         <div class="bleed-in" style="background-color: #0058cf"></div>
         <div class="overlay">
            <div class="vertical-align">
               <img src="https://via.placeholder.com/300.png/09f/fff">
               <h3>1</h3>
               <p>Branding &amp; Strategy</p>
            </div>
         </div>
      </a>
   </article>
</section>

I tried adding a container with an overlay, but it didn't work either.

 .container {
     position: relative;
     height:483px;
     width:555px;
     background-image:url("https://via.placeholder.com/300.png/09f/fff");
     background-size:cover;
     background-repeat:no-repeat;
}
 .overlay {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100%;
     width: 100%;
     opacity: 0;
     transition: .5s ease;
     background-color: rgba(0,40,80,0.8);
}
 .container:hover .overlay {
     opacity: 1;
}

score -1 · Answer 1 · answered Dec 05 '18 at 21:06

First of all, your code is messy. It's not properly indented and there's a lot of unnecessary codes. I'd like to post this as a comment, but my reputation isn't enough.

It wasn't working because the .overlay should be a sibling of the image, positioned absolute to their parent (.container). So when you hover through it, the container displays what's initially hidden inside.

<div>
    <!-- first item -->
    <div class="container">
        <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
        <div class="overlay">
            <p>Content here</p>
        </div>  
    </div>

    <!-- second item -->
    <div class="container">
        <img src="https://via.placeholder.com/300.png/09f/fff" alt="">
        <div class="overlay">
            <p>Content here</p>
        </div>  
    </div>
</div>

Here's what the CSS looks like.

.container {
    width: 300px;
    height: 300px;
    position: relative;
    display: inline-block;
}
.overlay {
    position: absolute;
    opacity: 0;
    transition: .5s ease;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.container:hover .overlay {
    opacity: 0.8;
    background: #fff;
}

Colour Overlay On Hover - With Text

1 Answers1