Welcome User
Login
Register
hover effecta
Alok Nandan
HTML
CSS
JS
Preview
<!DOCTYPE html> <html lang="en"> <head> <title>Hover Effect Style</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="container mt-40"> <div class="row mt-30"> <div class="col-md-4 col-sm-6"> <div class="box6"> <img src="http://bestjquery.com/tutorial/hover-effect/demo161/images/img-1.jpg" alt=""> <div class="box-content"> <h3 class="title">Williamson</h3> <span class="post">Web Developer</span> <ul class="icon"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box6"> <img src="http://bestjquery.com/tutorial/hover-effect/demo161/images/img-2.jpg" alt=""> <div class="box-content"> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</span> <ul class="icon"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="box6"> <img src="http://bestjquery.com/tutorial/hover-effect/demo161/images/img-3.jpg" alt=""> <div class="box-content"> <h3 class="title">Kristiana</h3> <span class="post">Web Designer</span> <ul class="icon"> <li><a href="#" class="fa fa-search"></a></li> <li><a href="#" class="fa fa-link"></a></li> </ul> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
body{background-color:#f1f1f2} .mt-30{margin-top:30px} .mt-40{margin-top:40px} .mb-30{margin-bottom:30px} @media only screen and (max-width:990px){.box1{margin-bottom:30px} } .box6{background:#000;position:relative} .box6:after{background:rgba(0,0,0,.7);position:absolute;top:0;left:-30%;bottom:0;right:70%;transform:skew(20deg) translateX(-75%)} .box6:hover:after{transform:skew(20deg) translateX(0)} .box6 img{width:100%;height:auto} .box6:hover img{opacity:.5} .box6 .box-content{padding:20px;text-align:right;position:absolute;top:0;right:0;z-index:1} .box6 .icon,.box7 .icon{padding:0;list-style:none} .box10 .icon li a,.box11,.box12,.box13,.box14,.box6 .icon li a,.box7,.box7 .icon li a,.box8,.box8 .icon li a{text-align:center} .box6 .title{font-size:20px;font-weight:900;color:#fff;margin:0 0 10px;transform:scale(0)} .box6:hover .title{transform:scale(1)} .box6 .icon li,.box6 .post{opacity:0;transform:translateX(40px);transition:all .35s ease 0s} .box6 .post{display:block;font-size:14px;color:#fff;margin-bottom:5px} .box6 .icon{display:inline-block;margin:0} .box6:hover .icon li,.box6:hover .post{opacity:1;transform:translateX(0)} .box6:hover .icon li:first-child{transition-delay:.1s} .box6:hover .icon li:nth-child(2){transition-delay:.2s} .box6 .icon li a{display:block;width:35px;height:35px;line-height:35px;background:#fff;font-size:18px;color:#605f5f;margin-bottom:5px;transition:all .35s ease} .box6 .icon li a:hover{background:#605f5f;color:#fff} @media only screen and (max-width:990px){.box6{margin-bottom:30px} }
View Another Modules
swipebox image
swipebox image
Date picker
Date picker
Validation Registration Form
Validation Registration Form
Filter Table Jquery
Filter Table Jquery
Bootstrap Table
Bootstrap Table
Bottom to Top Hover
Bottom to Top Hover
