Folding Profile Gallery With jQuery And CSS3 Transitions

A folding profile gallery with image filters that display the details of the profiles by clicking the thumbnails, built with jQuery and CSS3 transitions.

How to use it:

1. Add profile images and details to the gallery.

<div class="frame">
  <div class="profile" id="profile-1">
    <img src="1.jpg">
    <div class="overlay"></div>
    <div class="plus"></div>
  </div>
  <div class="profile" id="profile-2">
    <img src="2.jpg">
    <div class="overlay"></div>
    <div class="plus"></div>
  </div>
  <div class="profile" id="profile-3">
    <img src="3.jpg">
    <div class="overlay"></div>
    <div class="plus"></div>
  </div>
  <div class="profile" id="profile-4">
    <img src="4.jpg">
    <div class="overlay"></div>
    <div class="plus"></div>
  </div>
  <div class="detail" id="detail-1">
    <div class="close"></div>
    <img class="header" src="1-header.jpg">
    <div class="image">
      <img src="1.jpg">
    </div>
    <div class="infos">
      <div class="name">
        Julia Toth
      </div>
      <div class="action">
        <div class="btn">
          <span class="fa fa-phone"></span>
        </div>
        <div class="btn">
          <span class="fa fa-comment"></span>
        </div>
        <div class="btn">
          <span class="fa fa-heart"></span>
        </div>
      </div>
    </div>
  </div>
</div>

2. Load the Font Awesome for the icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

3. The necessary CSS/CSS3 rules for the profiel gallery.

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.6);
  background: #643a7a;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  -webkit-filter: saturate(0) brightness(0.8);
          filter: saturate(0) brightness(0.8);
}

.profile {
  position: relative;
  float: left;
  width: 194px;
  height: 194px;
  margin: 4px 0 0 4px;
  cursor: pointer;
}

.profile .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #643a7a;
  opacity: 0;
  transition: all .6s ease-in-out;
}

.profile .plus {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  background: rgba(230, 230, 230, 0.9);
  border-radius: 50%;
  box-shadow: 0.5rem 0.5rem 1rem 0.3rem rgba(0, 0, 0, 0.4);
  transition: all .4s ease-in-out;
  opacity: 0;
  -webkit-transform: scale(2);
          transform: scale(2);
  pointer-events: none;
}

.profile .plus:before {
  position: absolute;
  content: '';
  width: 14px;
  height: 2px;
  top: 24px;
  left: 18px;
  background: #643a7a;
}

.profile .plus:after {
  position: absolute;
  content: '';
  width: 2px;
  height: 14px;
  top: 18px;
  left: 24px;
  background: #643a7a;
}

.profile:hover .plus {
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
}

.profile:hover .overlay {
  opacity: 0.7;
}

4. The necessary CSS/CSS3 rules for the profiel details.

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.6);
  background: #643a7a;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  -webkit-filter: saturate(0) brightness(0.8);
          filter: saturate(0) brightness(0.8);
}

.profile {
  position: relative;
  float: left;
  width: 194px;
  height: 194px;
  margin: 4px 0 0 4px;
  cursor: pointer;
}

.profile .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #643a7a;
  opacity: 0;
  transition: all .6s ease-in-out;
}

.profile .plus {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  background: rgba(230, 230, 230, 0.9);
  border-radius: 50%;
  box-shadow: 0.5rem 0.5rem 1rem 0.3rem rgba(0, 0, 0, 0.4);
  transition: all .4s ease-in-out;
  opacity: 0;
  -webkit-transform: scale(2);
          transform: scale(2);
  pointer-events: none;
}

.profile .plus:before {
  position: absolute;
  content: '';
  width: 14px;
  height: 2px;
  top: 24px;
  left: 18px;
  background: #643a7a;
}

.profile .plus:after {
  position: absolute;
  content: '';
  width: 2px;
  height: 14px;
  top: 18px;
  left: 24px;
  background: #643a7a;
}

.profile:hover .plus {
  opacity: 1;
  -webkit-transform: scale(1) translate3d(0, 0, 0);
          transform: scale(1) translate3d(0, 0, 0);
}

.profile:hover .overlay {
  opacity: 0.7;
}

5. Include the latest version of jQuery JavaScript library at the bottom of the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

6. Toggle CSS classes using jQuery.

$('.profile').click( function() {
  $('.detail').addClass('active');
});

$('.close').click( function() {
  $('.detail').removeClass('active');
});

---

This awesome jQuery plugin is developed by Sabine Robart. For more Advanced Usages, please check the demo page or visit the official website.