"Untitled"
Bootstrap 4.1.1 Snippet by Rajatsethi

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>hover</title> <style> *{ padding: 0; margin: 0; } .btn{ background: red; display: inline-block; padding: 10px 30px; position: relative; z-index: 1; color: #fff; text-decoration: none; text-transform: uppercase; } .btn:before{ position: absolute; content: ''; width: 100%; height: 0%; background: #000; transition: all ease-in-out 0.5s; left: 0; top: 0; z-index: -1; } .btn:hover::before{ height: 100%; } .main-image img{ width: 100%; height: 850px; } .content-tec{ position: relative; padding: 200px; background: red; } .content-tec h2{ font-size: 50px; } .content-tec p{ font-size: 20px; } .content-tec:after { content: ''; position: absolute; width: 50%; transform: skewY(10deg); top: -100px; background: linear-gradient(90deg, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b); left: 0; height: 160px; } .content-tec:before { content: ''; position: absolute; width: 50%; transform: skewY(-10deg); top: -100px; background: linear-gradient(90deg, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b); right: 0; height: 160px; } </style> </head> <body> <a href="#" class="btn">Read More</a> <div class="main-image"> <img src="images/nft-10.png"> </div> <div class="content-tec"> <h2>jhbsdfasdvjdsf</h2> <p>adhbcfdshjdba</p> </div> </body> </html>

Related: See More

Material Bootstrap Wizard

Questions / Comments: