CSS : Overlaying divs on top of each other using flexbox syntax(vw, vh)?

.thumbnail{
	padding: 0px 0px 0px 0px;
    border:1px solid gray;
    background-color: white;
    border-radius: 5px;
    margin: 5px 10px 5px 10px;
    min-width: 10vw;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1000;
}

.thumbnail_img{
	width: 100%;
    height: auto;
    z-index: 1000;
}

p.caption_heading{
	font-weight: bold;
    line-height: 1em;
    font-size: 20px;
  
}
span.caption_desc{
	font-size:15px;
	color: gray;
}

.caption{
	flex-grow: 1;
	z-index: 1000;
	background-color: white; 
}

.thumbnail_footer{
	padding: 0px 10px 10px 10px;
	background-color: white;
	z-index: 1000;
}


.description{
    position: absolute;
    width: 12.7vw; /* as image */
    height: 40vh; /* as image */
    line-height: 200px; /* as image */
    text-align: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.0);
    font-weight: bold;
    z-index: 0;
    border-radius: 5px;
    background-color: rgba(252, 111, 27, 0.0);
    transition: background-color 0.5s ease;
    display: flex;
    flex-direction : column;
}


div.description_heading {
	font-size: 20px;
	 /* font-size: calc(4vw + 4vh + 2vmin); */
	font-weight: bold;
	line-height: 2em;
}

div.description_desc {
	font-size: 15px;
	line-height: 2em;
}

.thumbnail:hover .description {
	position:absolute;
    z-index: 1000;
    display:block;
    background-color: rgba(252, 111, 27, 0.9);
    color: rgba(255, 255, 255, 0.9);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
<div class="thumbnail">
				 <div class="thumbnail_img">
			      <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
			      </div>
			      <div class="caption">
			        <p class="caption_heading">Item name<br/>
			        <span class="caption_desc">Item description</span></p>
			      </div>
			      <div class="thumbnail_footer">
			        <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>	     
			      </div>
			      <!-- overlay item  -->
			       <div class="description" href="#">
			       		<div class="description_heading"><br>_____<br>Item name<br>_____</div>
			       		<div class="description_desc">Item description</div>
			       		
			       </div>
			       <!-- overlay item  -->
			    </div>
</div>

I've been working to make an effect when user over their mouse over a div, it shows color overlay. It is simple effect. However the problem is I used flex, vw and vh, because I wanted to make responsive site. So when I made divs' size perfectly match each other, once browser size become different than it does not match anymore. I tried to find any examples on the internet but those are usually fixed size with px or position. I would like to know if there is a way to overlay color div on another div. If there is no solution, I guess I have to rebuild site into non-responsive.

Here is HTML

<div class="thumbnail">
  <div class="thumbnail_img">
    <img class="thumbnail_img" src="./resources/img/size_minmuri1.jpg" alt="...">
    </div>
    <div class="caption">
      <p class="caption_heading">Item name<br/>
          <span class="caption_desc">Item description</span></p>
    </div>
    <div class="thumbnail_footer">
    <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>      
    </div>
    <!-- overlay item  -->
    <div class="description" href="#">
        <div class="description_heading"><br>_____<br>Item name <br>_____</div>
        <div class="description_desc">item description</div>        
    </div>
    <!-- overlay item  -->
</div>

So When user hover their mouse over thumbnail div, description div should be appear and cover whole thumbnail div.

Here is CSS

.thumbnail{
   padding: 0px 0px 0px 0px;
   border:1px solid gray;
   background-color: white;
   border-radius: 5px;
   margin: 5px 10px 5px 10px;
   min-width: 10vw;
   min-height: 40vh;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   z-index: 1000;
 }

.thumbnail_img{
   width: 100%;
   height: auto;
   z-index: 1000;
}

p.caption_heading{
   font-weight: bold;
   line-height: 1em;
   font-size: 20px;
}
span.caption_desc{
   font-size:15px;
   color: gray;
 }

.caption{
   flex-grow: 1;
   z-index: 1000;
   background-color: white; 
}

.thumbnail_footer{
   padding: 0px 10px 10px 10px;
   background-color: white;
   z-index: 1000;
 }


 .description{
   background:rgba(252, 111, 27, 0.75);
   text-align:center;
   padding:45px 0 66px 0;
   opacity:0;
   -webkit-transition: opacity .25s ease;
   -moz-transition: opacity .25s ease;
  }


 div.description_heading {
   font-size: 20px;
   font-weight: bold;
   line-height: 2em;
 }

div.description_desc {
   font-size: 15px;
   line-height: 2em;
 }

.thumbnail:hover .description {
   opacity: 1; 
  }

Answers 1

  • You made many mistake of your code.

    You didn't set left and right for absolute position. If your position is absolute you should be set left right top and bottom css property. If you want to set hover effect for only image then you need to set image inside the position relative div. Then your hover content will placed with image. width and height will set 100% if you set fixed width it will not responsive.

    I fixed your problem except description inside content.

    Now on your own.

    .thumbnail{
    	padding: 0px 0px 0px 0px;
        border:1px solid gray;
        background-color: white;
        border-radius: 5px;
        margin: 5px 10px 5px 10px;
        min-width: 10vw;
        min-height: 40vh;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        z-index: 1000;
        position: relative;
    }
    
    .thumbnail_img{
    	width: 100%;
        height: auto;
        z-index: 1000;
        position: relative;
    }
    
    p.caption_heading{
    	font-weight: bold;
        line-height: 1em;
        font-size: 20px;
      
    }
    span.caption_desc{
    	font-size:15px;
    	color: gray;
    }
    
    .caption{
    	flex-grow: 1;
    	z-index: 1000;
    	background-color: white; 
    }
    
    .thumbnail_footer{
    	padding: 0px 10px 10px 10px;
    	background-color: white;
    	z-index: 1000;
    }
    
    
    .description{
        position: absolute;
        width: 100%; /* as image */
        height: 100%; /* as image */
        line-height: 200px; /* as image */
        text-align: center;
        text-decoration: none;
        color: rgba(0, 0, 0, 0.0);
        font-weight: bold;
        z-index: 0;
        border-radius: 5px;
        background-color: rgba(252, 111, 27, 1);
        transition: background-color 0.5s ease;
        display: flex;
        flex-direction : column;
        left: 0;
        top: 0;
    }
    
    
    div.description_heading {
    	font-size: 20px;
    	 /* font-size: calc(4vw + 4vh + 2vmin); */
    	font-weight: bold;
    	line-height: 2em;
    }
    
    div.description_desc {
    	font-size: 15px;
    	line-height: 2em;
    }
    
    .thumbnail:hover .description {
    	/*position:absolute;*/
        z-index: 1000;
        /*display:block;*/
        background-color: rgba(252, 111, 27, 0.9);
        color: rgba(255, 255, 255, 0.9);
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <div class="flex_body" style="display: flex; flex-direction: row; justify-content: space-between; ">
    <div class="thumbnail">
    				 <div class="thumbnail_img">
    			      <img class="thumbnail_img" src="https://placehold.it/100x100" alt="...">
                <div class="description" href="#">
    			       		<div class="description_heading"><br>_____<br>Item name<br>_____</div>
    			       		<div class="description_desc">Item description</div>
    			       		
    			       </div>
    			      </div>
    			      <div class="caption">
    			        <p class="caption_heading">Item name<br/>
    			        <span class="caption_desc">Item description</span></p>
    			      </div>
    			      <div class="thumbnail_footer">
    			        <a href="#" class="btn btn-primary" role="button">Read</a> <a href="#" class="btn btn-default" role="button">Button</a>	     
    			      </div>
    			      <!-- overlay item  -->
    			       
    			       <!-- overlay item  -->
    			    </div>
    </div>

    Hope this will help you.


Related Articles