user photos list with hover effect. and when you hover on image then display user information. this user list and hove effect is create using by sucton css and bootstarp. image hover effect created only using css.

you can get code of use list in html snippet. we give you example of bootstrap user list with hover effect , you can simple copy bellow code and use in your project. If it free snippets of bootstrap listview example So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code bootstrap user list template snippets, click on JS Code tab get code of jquery codd for bootstrap user profile list snippets, same as for CSS Code tab. It's pretty easy and simple example of bootstrap responsive user profile snippet.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container profile-main"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12"> <section class="new-deal"> <div class="item-slide"> <div class="box-img"> <img src="/demo/following1.jpg" alt="profile-img"/> </div> <div class="row"> <div class="col-md-10 slide-hover"> <h2>Steve Thomas</h2> <p>WEB DEVELOPER</p> <span>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed do<br /> eiusmod tempor. </span><br><br> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-google"></i> <i class="fa fa-youtube"></i> </div> </div> </div> </section> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <section class="new-deal"> <div class="item-slide"> <div class="box-img"> <img src="/demo/following2.jpg" alt="profile-img"/> </div> <div class="row"> <div class="col-md-10 slide-hover"> <h2>Jerom Taylor</h2> <p>WEB DESIGNER</p> <span>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed do<br /> eiusmod tempor. </span><br><br> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-google"></i> <i class="fa fa-youtube"></i> </div> </div> </div> </section> </div> <div class="col-md-4 col-sm-6 col-xs-12"> <section class="new-deal"> <div class="item-slide"> <div class="box-img"> <img src="/demo/following3.jpg" alt="profile-img"/> </div> <div class="row"> <div class="col-md-10 slide-hover"> <h2>John Bieber</h2> <p>SEO ANALYST</p> <span>Lorem ipsum dolor sit amet,<br/> consectetur adipisicing elit, sed do<br /> eiusmod tempor. </span><br><br> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-google"></i> <i class="fa fa-youtube"></i> </div> </div> </div> </section> </div> </div> </div> </body> </html>
.profile-main{ padding: 10px; } .new-deal{ width:300px; height: 300px; margin-left: 30px; overflow: hidden; border-radius: 50%; } .new-deal .item-slide{ position: relative; } .new-deal .slide-hover{ position: absolute; height: 100%; width: 100%; right: -100%; background:#F1F1F1; top: 0; transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; } .new-deal .item-slide:hover .slide-hover{ right:-60px; } .new-deal .item-slide:hover .box-img img{ left: -80%; } .slide-hover h2{ color: #853998; font-family: sans-serif; font-size: 20px; margin-top: 80px; } .slide-hover p{ font-size: 12px; font-weight: bold; } .slide-hover span{ font-size: 12px; color: #373624; } .slide-hover i{ border-radius: 3px; margin-right: 10px; padding: 9px 10px; color: #a0a0a0; } .slide-hover i:hover{ color: white; } .fa-facebook:hover{ background: #3b5a9b; } .fa-twitter:hover{ background: #31b0d5; } .fa-google:hover{ background: #EA4335; } .fa-youtube:hover{ background: #CC181E; } .box-img{ width: 100%; height: 300px; } .box-img img{ position: absolute; height: 100%; width: 100%; left: 0%; top: 0; transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; } @media (min-width: 320px) and (max-width: 360px){ .profile-main{ padding: 0px; } .new-deal{ margin: 10px 0px 10px 10px; } } @media (min-width: 768px) and (max-width: 980px){ .profile-main{ padding: 0px; } .new-deal{ margin: 10px 25px; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog