"mega menu panel navigation hover effect"
Bootstrap 4.0.0 Snippet by shu3aybbadran

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <!-- AlPhaD UI - Nav section * Version: 2.0 * Build Date : 26-03-2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * License : MIT --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Nav by AlPhaD</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <!-- font-awesome icons --> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <!-- animate css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!-- nav css --> <link rel="stylesheet" href="nav.css"> </head> <body> <div class="nav row"> <div class="item blue col-6 col-md-3"> <div class="green"> <img src="https://maleplasticsurgerynewyork.com/wp-content/uploads/2013/10/tuxedo-guy.png" alt="" class="img"> </div> <div class="caption"> <h3 class="title">item title</h3> <p class="text">item description and price...</p> <button class="btn btn-default">clickeme</button> </div> </div><!-- /.col --> <div class="item green col-6 col-md-3"> <div class="red"> <img src="http://www.redcamelsolutions.com/wp-content/uploads/revslider/revslider_casanova1/man.png" alt="" class="img"> </div> <div class="caption"> <h3 class="title">item title</h3> <p class="text">item description and price...</p> <button class="btn btn-default">clickeme</button> </div> </div><!-- /.col --> <div class="item red col-6 col-md-3"> <div class=""> <img src="https://www.3wisemen.co.nz/media/catalog/product/c/r/crop_side_1_1-2.png" alt="" class="img"> </div> <div class="caption"> <h3 class="title">item title</h3> <p class="text">item description and price...</p> <button class="btn btn-default">clickeme</button> </div> </div><!-- /.col --> <div class="item gray col-6 col-md-3"> <div class="gray"> <img src="https://cdn.shopify.com/s/files/1/1158/4104/products/ScreenShot_20160312122207_1024x1024.png" alt="" class="img"> </div> <div class="caption"> <h3 class="title">item title</h3> <p class="text">item description and price...</p> <button class="btn btn-default">clickeme</button> </div> </div><!-- /.col --> </div><!-- /.row --> </body> </html>
/* AlPhaD UI - Nav section * Version: 2.0 * Build Date : 26-03-2018 * Last Update : - [] * Author: ALPhA D * Website: www.alphadsy.com * Github: www.github.com/alphadsy/ * License : MIT */ /* [Layout] * body - nav .nav + item + caption || -img - title - text - action [Color codes] [Typography] [content table] - nav main css - nav main css (lg) . . . - demo css (for demo purpose only) */ /* ======================================= nav ========================================*/ .nav .item { height: 600px; } .item .img { position: absolute; left: 0; height: 100%; width: 130%; opacity: 0; z-index: 0; } .item:first-child .img { opacity: .3; } .item:last-child .img { position: absolute; right: 0; left: auto; width: 200%; } .item:hover .img { opacity: 1; filter: grayscale(.3) } .item:first-child:hover .img { opacity: 1; filter: grayscale(.3) } .item::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; transition: .5s ease; z-index: 5; opacity: 0; } .item:hover::after { opacity: .5; } .item.green::after { background-color: rgb(91, 204, 91); } .item.red::after { background-color: rgb(105, 41, 41); } .item.blue::after { background-color: rgb(23, 23, 90); } .item.gray::after { background-color: rgb(109, 109, 109); } .item .caption { position: absolute; top: 70%; padding: 1rem; z-index: 10; transition: .5s ease; } .item .caption .btn { opacity: 0; } .item:hover .caption { top: 50%; color: #fff; } .item:hover .caption .btn { opacity: 1; }

Related: See More

Rubik Presentation Page
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: