CSS Overlay Hover Example

HTML

<body>
     <div id="sb">
         <div id="description">
             <p>position you description text where ever you like.</p>
         </div>
         <div id="sidebar"></div>
     </div>
 </body>

CSS

/*  Sidebar  */
 #sb {
     position: relative;
     float:left;
     width: 100%;
     height: 100%;
     z-index: 1;
     margin: 30px 0 0 0;
 }
 #sidebar {
     position: relative;
     float: left;
     z-index: 2;
     width: 100%;
     height: 100%;
    background-image: url(https://i.imgur.com/rjTQHl.jpg);
    background-repeat: no-repeat;
    background-position: center;
 }
 
 #description {
    position: absolute;
    display: block;
    float: left;
    z-index: 3;
    width: 550px;
    height: 400px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border:20px solid #000;
    border-style:inset;
    text-transform: uppercase;
    opacity:0;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
    -o-transition:all 1s ease;
    transition:all 1s ease-in-out;
 }
 #description:hover {
     opacity:1;
     -webkit-transition:all 1s ease;
     -moz-transition:all 1s ease;
     -o-transition:all 1s ease;
     transition:all 1s ease-in-out;
 }
#description > p {
    width: 60%;
    margin: 180px auto;
    text-align: center;    
}