<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="box"> <i class="fa fa-quote-left fa2" aria-hidden="true"></i> <div class="text"> <i class="fa fa-quote-right fa1" aria-hidden="true"></i> <div> <h1>Prakash Prajapati </h1> <p>Excepteur sint occaecat cupidatat proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> </div>

body { margin: 0; padding: 0; background: #03a9f4; font-family: sans-serif; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; height: 400px; cursor: pointer; transform-style: preserve-3d; perspective: 2000px; transition: 0.5s; } .box:hover { transform: translate(-50%,-50%) rotateY(-30deg) skewY(5deg); } .box:before { content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border-top: 20px solid #fff; border-left: 20px solid #fff; box-sizing: border-box; } .box:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; border-bottom: 20px solid #fff; border-right: 20px solid #fff; box-sizing: border-box; } .box .text { position: absolute; top: 30px; left: -30px; background: #262626; width: calc(100% + 60px); height: calc(100% - 60px); transition: 0.5s; } .box:hover .text { transform:rotateY(30deg) skewY(-5deg); } .text div { position: absolute; top: 50%; left: 0; width: 100%; transform:translateY(-50%); padding: 40px 80px; box-sizing: border-box; text-align: center; } .text div h1 { margin: 0 0 20px; padding: 0; color: #fff; } .text div p { margin: 0 0 20px; padding: 0; color: #fff; font-size: 18px; } .fa { width: 80px; height: 80px; background: #fff; color: #262626; text-align: center; line-height: 80px !important; font-size: 40px !important; } .fa.fa1 { position: absolute; top: 0; left: 0; } .fa.fa2 { position: absolute; bottom: 0; right: 0; z-index: 1; }