Create a Sliding Playing cards UI With HTML & CSS
On this tutorial, we’ll assemble a card UI design and focus on totally different CSS methods for easily revealing the content material of every card on hover.
To see all the results, make sure you hover over the playing cards of the upcoming demos!
Card Part
Card elements are a standard UI sample typically used for representing weblog posts, testimonials, merchandise, and many others.
Many instances, for space-saving, particularly on cellular gadgets, you’ll discover them as part of a horizontal slider.
Bootstrap Card Part
UIkit Card Part
1. The Markup
To start with, inside a container, we’ll place six playing cards.
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 |
Every card could have the next construction:
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 | |
| 9 | |
| 10 | |
| 11 | View extra |
| 12 | |
| 13 | |
| 14 | |
| 15 | |
| 16 | |
| 17 | |
| 18 |
2. The Types
We’ll skip the introductory types and soar instantly into the necessary ones:
- We’ll give every card a static top decided by the card-height CSS variable.
- The .card-details aspect will probably be completely positioned and sit on prime of the picture. Nevertheless, by default, solely a portion must be seen, particularly its title and subtitle. To realize this, we’ll additionally outline an preliminary static top for the .card-details aspect decided by the initial-visible-card-height CSS variable. Please notice that this top and the breakpoints work for our content material right here; in your case, you may want one thing totally different.
- So long as we hover over a card, we’ll animate the peak of the .card-details aspect to 100%, so we’ll obtain a slide animation from prime to backside.
Right here’s part of the corresponding types:
| 1 | /*CUSTOM VARIABLES HERE*/ |
| 2 | |
| 3 | .card { |
| 4 | place: relative; |
| 5 | margin: 0; |
| 6 | overflow: hidden; |
| 7 | box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1); |
| 8 | top: var(–card-height); |
| 9 | } |
| 10 | |
| 11 | .card-details { |
| 12 | show: flex; |
| 13 | flex-direction: column; |
| 14 | justify-content: space-between; |
| 15 | place: absolute; |
| 16 | prime: 0; |
| 17 | left: 0; |
| 18 | proper: 0; |
| 19 | backside: 0; |
| 20 | background: rgba(193, 18, 31, 0.7); |
| 21 | coloration: var(–white); |
| 22 | padding: 40px; |
| 23 | top: var(–initial-visible-card-height); |
| 24 | transition: all 0.3s; |
| 25 | } |
| 26 | |
| 27 | .card-link:hover .card-details { |
| 28 | top: 100%; |
| 29 | background: var(–white); |
| 30 | } |
And the associated demo—make sure you view it on bigger display screen:
Remodel Property
However what if we wish to reverse the animation course? In such a case, all now we have to do is to animate the rework CSS property as an alternative of the peak one and set the worth of the transform-origin property to the underside.
Right here’s part of the corresponding types:
| 1 | /*CUSTOM VARIABLES*/ |
| 2 | |
| 3 | .card-details { |
| 4 | rework: translateY(calc(100% – var(–initial-visible-card-height))); |
| 5 | transform-origin: backside; |
| 6 | } |
| 7 | |
| 8 | .card-link:hover .card-details { |
| 9 | rework: none; |
| 10 | } |
And the associated demo—make sure you view it on bigger display screen:
Clip-Path Property
Alternatively, we’re in a position to obtain the aforementioned results utilizing the CSS clip-path property. We are able to additionally use the circle() operate of this property to create some fascinating results.
Right here’s part of the corresponding types:
| 1 | .card-details { |
| 2 | clip-path: circle(15% at 0 0); |
| 3 | transition: all 0.4s; |
| 4 | } |
| 5 | |
| 6 | .card-top-right .card-details { |
| 7 | clip-path: circle(15% at 100% 0); |
| 8 | } |
| 9 | |
| 10 | .card-bottom-right .card-details { |
| 11 | clip-path: circle(15% at 100% 100%); |
| 12 | } |
| 13 | |
| 14 | .card-bottom-left .card-details { |
| 15 | clip-path: circle(15% at 0 100%); |
| 16 | } |
| 17 | |
| 18 | .card-details * { |
| 19 | opacity: 0; |
| 20 | } |
| 21 | |
| 22 | .card-link:hover .card-details { |
| 23 | clip-path: circle(150% at 100% 100%); |
| 24 | } |
| 25 | |
| 26 | .card-link:hover .card-details * { |
| 27 | opacity: 1; |
| 28 | } |
And the associated demo—make sure you view it on bigger display screen:
Conclusion
That’s all, of us! On this quick tutorial, we coated totally different CSS strategies for creating card layouts with animated content material. This sort of structure has limitations whenever you work with static heights, so concentrate on it and use it provided that you may management the cardboard content material.
Should you want one thing extra elegant, contemplate placing JavaScript into the loop.
As a subsequent step, you can too allow these results provided that the consumer’s major enter mechanism can hover over parts by benefiting from acceptable media queries.
As all the time, thanks lots for studying!
