JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-3">
    <div class="bg-bapHome">
       <h3 class="text-white">bapHome</h3>
         <div class=" box-pai">
          <div class="shadow"></div>
           <div class="box-filho">
                <p>Rest a little easier knowing that the bapHome device has checked for known vulnerabilities at home.  Available via the bapCloud.</p>
              </div>
            </div>
          </div>
       </div>
       
       
         <div class="col-md-3">
    <div class="bg-bapHome">
       <h3 class="text-white">bapHome</h3>
         <div class=" box-pai">
          <div class="shadow"></div>
           <div class="box-filho">
                <p>Rest a little easier knowing that the bapHome device has checked for known vulnerabilities at home.  Available via the bapCloud.</p>
              </div>
            </div>
          </div>
       </div>
       
       
       
       
       
    </div>

CSS

.box-pai{
		margin: 20px;
		width: 50%;
		height: 300px;
		padding: 10px;
		text-align: center;
		overflow: hidden;
		position: relative;
	}

	.box-pai:hover .box-filho{
		top: 50%;
		transition: all .75s ease-in-out;
	}
	.box-pai:hover .shadow{
		opacity: 1;
		transition: all .35s ease-in-out;
	}
	.box-filho{
		left: 0;
		text-align: center;
		width: 100%;
		position: absolute;
		top: 150%;
		transition: all .75s ease-in-out;
		z-index: 10;
	}
	.box-filho p{
		margin: 0;
		color: #000;
		transition: all 1s ease-in-out;
	}
	.box-pai:hover .box-filho p{
		color: #fff;
		transition: all 1s ease-in-out;
	}
	.shadow{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.8);
		transition: all .35s ease-in-out;
	}
  
  
  .bg-bapHome{
  background: url('http://storage.googleapis.com/wzuk/assets/images/76756616/76756616_600.jpg') no-repeat center center;

}