Parallax Flipping Cards animation with Pure CSS: a hand-crafted, open-source Bootstrap 5 card. HTML & CSS included, ready to copy.
1<div class="wrapper">
2 <h1>Parallax Flipping Cards</h1>
3 <div class="cols">
4 <div class="col" ontouchstart="this.classList.toggle('hover');">
5 <div class="container">
6 <div class="front" style="background-image: url(https://unsplash.it/500/500/)">
7 <div class="inner">
8 <p>Diligord</p>
9 <span>Lorem ipsum</span>
10 </div>
11 </div>
12 <div class="back">
13 <div class="inner">
14 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
15 </div>
16 </div>
17 </div>
18 </div>
19 <div class="col" ontouchstart="this.classList.toggle('hover');">
20 <div class="container">
21 <div class="front" style="url(https://unsplash.it/511/511/)">
22 <div class="inner">
23 <p>Rocogged</p>
24 <span>Lorem ipsum</span>
25 </div>
26 </div>
27 <div class="back">
28 <div class="inner">
29 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
30 </div>
31 </div>
32 </div>
33 </div>
34 <div class="col" ontouchstart="this.classList.toggle('hover');">
35 <div class="container">
36 <div class="front" style="background-image: url(https://unsplash.it/502/502/)">
37 <div class="inner">
38 <p>Strizzes</p>
39 <span>Lorem ipsum</span>
40 </div>
41 </div>
42 <div class="back">
43 <div class="inner">
44 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
45 </div>
46 </div>
47 </div>
48 </div>
49 <div class="col" ontouchstart="this.classList.toggle('hover');">
50 <div class="container">
51 <div class="front" style="background-image: url(https://unsplash.it/503/503/)">
52 <div class="inner">
53 <p>Clossyo</p>
54 <span>Lorem ipsum</span>
55 </div>
56 </div>
57 <div class="back">
58 <div class="inner">
59 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
60 </div>
61 </div>
62 </div>
63 </div>
64 <div class="col" ontouchstart="this.classList.toggle('hover');">
65 <div class="container">
66 <div class="front" style="background-image: url(https://unsplash.it/504/504/">
67 <div class="inner">
68 <p>Rendann</p>
69 <span>Lorem ipsum</span>
70 </div>
71 </div>
72 <div class="back">
73 <div class="inner">
74 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
75 </div>
76 </div>
77 </div>
78 </div>
79 <div class="col" ontouchstart="this.classList.toggle('hover');">
80 <div class="container">
81 <div class="front" style="background-image: url(https://unsplash.it/505/505/)">
82 <div class="inner">
83 <p>Reflupper</p>
84 <span>Lorem ipsum</span>
85 </div>
86 </div>
87 <div class="back">
88 <div class="inner">
89 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
90 </div>
91 </div>
92 </div>
93 </div>
94 <div class="col" ontouchstart="this.classList.toggle('hover');">
95 <div class="container">
96 <div class="front" style="background-image: url(https://unsplash.it/506/506/)">
97 <div class="inner">
98 <p>Acirassi</p>
99 <span>Lorem ipsum</span>
100 </div>
101 </div>
102 <div class="back">
103 <div class="inner">
104 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
105 </div>
106 </div>
107 </div>
108 </div>
109 <div class="col" ontouchstart="this.classList.toggle('hover');">
110 <div class="container">
111 <div class="front" style="background-image: url(https://unsplash.it/508/508/)">
112 <div class="inner">
113 <p>Sohanidd</p>
114 <span>Lorem ipsum</span>
115 </div>
116 </div>
117 <div class="back">
118 <div class="inner">
119 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
120 </div>
121 </div>
122 </div>
123 </div>
124 </div>
125 </div>
Bootstrap carousel with cards in 3 columns
Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.
Bootstrap 5 ecommerce product cards details template
Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
Bootstrap snippet Panels with nav tabs using HTML & CSS
Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.