This time I will share jQuery Plugin and tutorial about Expanding Info Card With jQuery And CSS/CSS3, hope it will help you in programming stack.
A pretty nice card interaction design that expands the info button into a modal-style, full-size info box using jQuery and CSS3 transitions & transforms.
How to use it:
1. Insert an info box into your card.
3 |
<span class="icon-info"></span> |
2. The core CSS for the card & info box.
07 |
box-shadow: 0 12px 48px -8px rgba(0,0,0,0.1); |
18 |
transition: all 0.2s ease; |
22 |
width: calc(100% + 24px); |
23 |
height: calc(100% + 24px); |
26 |
.card .hint.show .icon-info:before { |
27 |
transform: translate(15px, 10px) rotate(-45deg); |
30 |
.card .hint.show .icon-info:after { |
31 |
transform: translate(15px, 10px) rotate(45deg); |
3. The CSS for the info button.
01 |
.card .hint .icon-info { |
14 |
.card .hint .icon-info:before, |
15 |
.card .hint .icon-info:after { |
22 |
transform-origin: center center; |
23 |
transition: all 0.25s ease; |
26 |
.card .hint .icon-info:before { |
27 |
transform: translate(15px, 6px) rotate(0) scale(1, 0.2); |
30 |
.card .hint .icon-info:after { |
31 |
transform: translate(15px, 12px) rotate(0) scale(1, 0.5); |
4. Include the necessary jQuery JavaScript library on the page.
1 |
<script src="/path/to/jquery.slim.min.js"></script> |
5. The jQuery script to toggle the CSS class when the user clicks on the info button.
1 |
$('.hint').click(function() { |
2 |
$(this).toggleClass("show"); |
This awesome jQuery plugin is developed by Andreas Storm. For more Advanced Usages, please check the demo page or visit the official website.
