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
Hover Effect Style
Hover Effect Style
JavaScript Captcha
JavaScript Captcha
Our Services
Our Services
Customize Aler Message
Customize Aler Message
Digital Watch
Digital Watch
Nested Dropdown Menu
Nested Dropdown Menu
