"Box skew hover"
Bootstrap 4.1.1 Snippet by gauravmeena0708

<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 ----------> <body> <div class="container"> <div class="box"> <div class="content"> <h2>Box One</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias ipsa dolor veritatis quaerat. Amet cum est illo consequuntur exercitationem! A culpa placeat similique iure vero consectetur eos maxime necessitatibus sapiente!</p> </div> </div> <div class="box"> <div class="content"> <h2>Box Two</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias ipsa dolor veritatis quaerat. Amet cum est illo consequuntur exercitationem! A culpa placeat similique iure vero consectetur eos maxime necessitatibus sapiente!</p> </div> </div> <div class="box"> <div class="content"> <h2>Box Three</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias ipsa dolor veritatis quaerat. Amet cum est illo consequuntur exercitationem! A culpa placeat similique iure vero consectetur eos maxime necessitatibus sapiente!</p> </div> </div> </div> </body>
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); * { margin: 0; padding: 0; } body { font-family: "Lato", sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #001628; } .container { position: relative; width: 90%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 70px; } .container .box::before { content: ''; position: absolute; height: 100%; width: 100%; background: #fff; z-index: -1; top: -2px; left: -2px; right: -2px; bottom: -2px; transform: skew(2deg, 3deg); transition: .5s; } .container .box:hover:before { transform: skew(-2deg, -3deg); } .container .box { position: relative; color: #fff; height: 400px; /* border: 1px solid #fff; */ display: flex; align-content: center; align-items: center; background-color: #001628; } .container .box:nth-child(1):before { background: linear-gradient(to right, #00c3ff, #ffff1c); } .container .box:nth-child(2):before { background: linear-gradient(to right, #ef32d9, #89fffd); } .container .box:nth-child(3):before { background: linear-gradient(to right, #e96443, #904e95); } .content { padding: 0 40px; position: relative; } .content h2 { font-weight: 700; font-size: 30px; margin-bottom: 30px; } .content p { letter-spacing: 1px; font-size: 18px; }

Related: See More


Questions / Comments: