Folding Profile Gallery With jQuery And CSS3 Transitions

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.

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.

  • Publication date: 28.01.2019
  • Source