Please enable javascript in your browser to view this site!

Tiles With Overlay on Hover

Summary

So my client wanted tiles that have bullet points on an overlay when hovered. This is what I ended up putting together. Works well with mobile as they stack on top of each other. Will be updating the code as I build more functionality. 

Result

Code

<!-- Custom Code by John Darabos -->
<!-- www.JohnDarabos.com -->

<!-- Begin Custom Styles -->
<style>
.jdTiles {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
  
.jdTile {
  flex: 1 33.3333%;
  text-decoration: none;
  height: 200px;
  background-size: cover;
  color: #FFF;
  position: relative;
  overflow: hidden;
}

.jdDescription {
  box-sizing: border-box;
  background: rgba(0,0,0,.6);
  padding: 10px;
  height: 200px;
  width: 100%;
  position: absolute;
  transform: translateY(200px);
  transition: all 300ms ease-in-out;
}
  
  .jdBoxCenter {
    color: white;
    text-align: center;
    text-transform: uppercase;
 margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

.jdTile:hover > .jdDescription {
  transform: translateY(0);
  background: rgba(0,0,0,.6);
  padding-top: 30px;
}
  .jdBlue {
  background-color: #223c78;
  }
  
  .jdGreen {
  background-color: #72adb5;
  }

@media screen and (max-width:700px) {
  .jdTile {
    flex: 1 1 100%;
  }
}
</style>
<!-- End Custom Styles -->

<!-- Begin Tiles -->
<div class="jdTiles">

<!-- Want to make the tiles links? Replace the # with your URL -->
  <a href="#" class="jdTile jdBlue">
    
    <!-- Title of the Tile -->
    <h2 class="jdBoxCenter">Title</h2>
      
    <!-- Overlay That Pops Up On Hover -->
    <div class="jdDescription">
        <ul>
            <li>Bullet</li>        
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdGreen">
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdBlue" >
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>
            <li>Bullet</li>        
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdGreen">
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdBlue" >
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdGreen">
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdBlue" >
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdGreen">
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
  <a href="#" class="jdTile jdBlue" >
    <h2 class="jdBoxCenter">Title</h2>
    <div class="jdDescription">
        <ul>         
            <li>Bullet</li>         
            <li>Bullet</li>         
            <li>Bullet</li>       
        </ul>
    </div>
  </a>
</div>
<!-- End Tiles -->

<!-- Custom Code by John Darabos -->
<!-- www.JohnDarabos.com -->

Jonathan Darabos

Sundog Studios, 103 Miley Dr, Starkville, MS, 39759, United States