Live Demo - User image list with hover effect and display user info usign bootstrap

See Free Live Demo example of 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...

<!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;
    }   
}