This time I will share jQuery Plugin and tutorial about Folding Profile Gallery With jQuery And CSS3 Transitions, hope it will help you in programming stack.
| File Size: | 4.48 KB |
|---|---|
| Views Total: | 1142 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
01 |
<div class="frame"> |
02 |
<div class="profile" id="profile-1"> |
03 |
<img src="1.jpg"> |
04 |
<div class="overlay"></div> |
05 |
<div class="plus"></div> |
06 |
</div> |
07 |
<div class="profile" id="profile-2"> |
08 |
<img src="2.jpg"> |
09 |
<div class="overlay"></div> |
10 |
<div class="plus"></div> |
11 |
</div> |
12 |
<div class="profile" id="profile-3"> |
13 |
<img src="3.jpg"> |
14 |
<div class="overlay"></div> |
15 |
<div class="plus"></div> |
16 |
</div> |
17 |
<div class="profile" id="profile-4"> |
18 |
<img src="4.jpg"> |
19 |
<div class="overlay"></div> |
20 |
<div class="plus"></div> |
21 |
</div> |
22 |
<div class="detail" id="detail-1"> |
23 |
<div class="close"></div> |
24 |
<img class="header" src="1-header.jpg"> |
25 |
<div class="image"> |
26 |
<img src="1.jpg"> |
27 |
</div> |
28 |
<div class="infos"> |
29 |
<div class="name"> |
30 |
Julia Toth |
31 |
</div> |
32 |
<div class="action"> |
33 |
<div class="btn"> |
34 |
<span class="fa fa-phone"></span> |
35 |
</div> |
36 |
<div class="btn"> |
37 |
<span class="fa fa-comment"></span> |
38 |
</div> |
39 |
<div class="btn"> |
40 |
<span class="fa fa-heart"></span> |
41 |
</div> |
42 |
</div> |
43 |
</div> |
44 |
</div> |
45 |
</div> |
2. Load the Font Awesome for the icons.
1 |
<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.
01 |
.frame { |
02 |
position: absolute; |
03 |
top: 50%; |
04 |
left: 50%; |
05 |
width: 400px; |
06 |
height: 400px; |
07 |
margin-top: -200px; |
08 |
margin-left: -200px; |
09 |
border-radius: 2px; |
10 |
box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.6); |
11 |
background: #643a7a; |
12 |
color: #fff; |
13 |
-webkit-font-smoothing: antialiased; |
14 |
-moz-osx-font-smoothing: grayscale; |
15 |
} |
16 |
17 |
img { |
18 |
-webkit-filter: saturate(0) brightness(0.8); |
19 |
filter: saturate(0) brightness(0.8); |
20 |
} |
21 |
22 |
.profile { |
23 |
position: relative; |
24 |
float: left; |
25 |
width: 194px; |
26 |
height: 194px; |
27 |
margin: 4px 0 0 4px; |
28 |
cursor: pointer; |
29 |
} |
30 |
31 |
.profile .overlay { |
32 |
position: absolute; |
