<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- <div class="row row-cols-lg-3 row-cols-1 p-2">--> <div class="row"> <div class="col-md-4 col-12 position-relative col-height"> <div class="front position-absolute p-4"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.</p> </div> <div class="back position-absolute"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.</p> </div> </div> <div class="col-md-4 col-12 position-relative col-height"> <div class="front position-absolute"> <p class="card-text position-absolute">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a wider card with supporting text below as a natural lead-in to additional content. </p> </div> <div class="back position-absolute"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.</p> </div> </div> <div class="col-md-4 col-12 position-relative col-height" > <div class="front position-absolute"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. </p> </div> <div class="back position-absolute"> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a wider card with supporting text below as a natural lead-in to additional content.</p> </div> </div> </div> </div>

.col-height{ height:20em; } .front { background-color: rgb(148, 34, 34); border: 12px solid yellow; width: 100%; height: 100%; } .back { opacity:0; background-color: gray; border: 12px solid green; color: white; width: 100%; height: 100%; } .back:hover { /*background-color: gray; border: 12px solid green; width: 100%; height: 100%;*/ opacity:1; }