This code snippet helps you to create blog cards with animation using CSS. It creates a list of booking cards, each card representing a ticket for a specific event. The cards include information about the event, such as the title, subtitle, date, location, and price. The booking cards are styled using CSS, which can be included in the same HTML file or in a separate file.
Now it’s time to create a Blog card with Animation using HTML and CSS.
How to Create CSS Blog Cards with Animation
Create the HTML structure for the cards as follows:
<h1>Tickets cards</h1>
<ul>
<li class="booking-card" style="background-image: url(https://images.unsplash.com/photo-1578944032637-f09897c5233d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ)">
<div class="book-container">
<div class="content">
<button class="btn">Réserver</button>
</div>
</div>
<div class="informations-container">
<h2 class="title">Je suis un billet pour aller visiter un truc</h2>
<p class="sub-title">Et moi un je suis sous-titre</p>
<p class="price"><svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z" />
</svg>De 0 à 15 €</p>
<div class="more-information">
<div class="info-and-date-container">
<div class="box info">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
</svg>
<p>Parc des expositions à NANTES</p>
</div>
<div class="box date">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
</svg>
<p>Samedi 1er février 2020</p>
</div>
</div>
<p class="disclaimer">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet perferendis culpa. Expedita architecto nesciunt, rem distinctio</p>
</div>
</div>
</li>
<li class="booking-card" style="background-image: url(https://images.unsplash.com/photo-1580137197581-df2bb346a786?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);">
<div class="book-container">
<div class="content">
<button class="btn">Réserver</button>
</div>
</div>
<div class="informations-container">
<h2 class="title">Je suis moi aussi un billet</h2>
<p class="sub-title">Et moi je suis un 2ème sous-titre</p>
<p class="price"><svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z" />
</svg>De 0 à 35 €</p>
<div class="more-information">
<div class="info-and-date-container">
<div class="box info">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
</svg>
<p>Parlement de Bretagne à RENNES</p>
</div>
<div class="box date">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
</svg>
<p>À partir du Dimanche 3 Juin 2020</p>
</div>
</div>
<p class="disclaimer">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet perferendis culpa. Expedita architecto nesciunt, rem distinctio</p>
</div>
</div>
</li>
<li class="booking-card" style="background-image: url(https://images.unsplash.com/photo-1579489225078-27977a77bf72?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);">
<div class="book-container">
<div class="content">
<button class="btn">Réserver</button>
</div>
</div>
<div class="informations-container">
<h2 class="title">Encore un billet</h2>
<p class="sub-title">Encore un sous-titre</p>
<p class="price"><svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z" />
</svg>20 €</p>
<div class="more-information">
<div class="info-and-date-container">
<div class="box info">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
</svg>
<p>Le Trident à CHERBOURG</p>
</div>
<div class="box date">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
</svg>
<p>Février 2020</p>
</div>
</div>
<p class="disclaimer">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet perferendis culpa. Expedita architecto nesciunt, rem distinctio</p>
</div>
</div>
</li>
<li class="booking-card" style="background-image: url(https://images.unsplash.com/photo-1532509854226-a2d9d8e66f8e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);">
<div class="book-container">
<div class="content">
<button class="btn">Réserver</button>
</div>
</div>
<div class="informations-container">
<h2 class="title">Now I'm a ticket but in english</h2>
<p class="sub-title">And me, call me "sub-title" now</p>
<p class="price"><svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z" />
</svg>From 0 to 15 €</p>
<div class="more-information">
<div class="info-and-date-container">
<div class="box info">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z" />
</svg>
<p>Centre Pompidou at PARIS</p>
</div>
<div class="box date">
<svg class="icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z" />
</svg>
<p>From October to December 2020</p>
</div>
</div>
<p class="disclaimer">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi eveniet perferendis culpa. Expedita architecto nesciunt, rem distinctio</p>
</div>
</div>
</li>
</ul>
<p class="credits">Designed by <a href="https://www.linkedin.com/in/ana%C3%AFs-laghzali-8b613297/" target="_blank">Anaïs Laghzali</a> & developed by <a href="https://remiruc.com" target="_blank">Rémi Rucojevic</a><br>at <a href="https://www.hippocampe.fr" target="_blank">Hippocampe.fr</a></p>
Now, style our project using the following CSS styles:
* {
margin: 0;
padding: 0;
font-family: "Sofia", sans-serif;
}
.cd_main{
display: block !important;
}
h2 {
color: #0a4870;
font-weight: 500;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
ul .booking-card {
position: relative;
width: 300px;
display: flex;
flex: 0 0 300px;
flex-direction: column;
margin: 20px;
margin-bottom: 30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
background-position: center center;
background-size: cover;
text-align: center;
color: #0a4870;
transition: 0.3s;
}
ul .booking-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(10, 72, 112, 0);
transition: 0.3s;
}
ul .booking-card .book-container {
height: 200px;
}
ul .booking-card .book-container .content {
position: relative;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
transform: translateY(-200px);
transition: 0.3s;
}
ul .booking-card .book-container .content .btn {
border: 3px solid white;
padding: 10px 15px;
background: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1.3em;
color: white;
cursor: pointer;
transition: 0.3s;
}
ul .booking-card .book-container .content .btn:hover {
background: white;
border: 0px solid white;
color: #0a4870;
}
ul .booking-card .informations-container {
flex: 1 0 auto;
padding: 20px;
background: #f0f0f0;
transform: translateY(206px);
transition: 0.3s;
}
ul .booking-card .informations-container .title {
position: relative;
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: bold;
font-size: 1.2em;
}
ul .booking-card .informations-container .title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
width: 50px;
margin: auto;
background: #0a4870;
}
ul .booking-card .informations-container .price {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
ul .booking-card .informations-container .price .icon {
margin-right: 10px;
}
ul .booking-card .informations-container .more-information {
opacity: 0;
transition: 0.3s;
}
ul .booking-card .informations-container .more-information .info-and-date-container {
display: flex;
}
ul .booking-card .informations-container .more-information .info-and-date-container .box {
flex: 1 0;
padding: 15px;
margin-top: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: white;
font-weight: bold;
font-size: 0.9em;
}
ul .booking-card .informations-container .more-information .info-and-date-container .box .icon {
margin-bottom: 5px;
}
ul .booking-card .informations-container .more-information .info-and-date-container .box.info {
color: #ec992c;
margin-right: 10px;
}
ul .booking-card .informations-container .more-information .disclaimer {
margin-top: 20px;
font-size: 0.8em;
color: #7d7d7d;
}
ul .booking-card:hover::before {
background: rgba(10, 72, 112, 0.6);
}
ul .booking-card:hover .book-container .content {
opacity: 1;
transform: translateY(0px);
}
ul .booking-card:hover .informations-container {
transform: translateY(0px);
}
ul .booking-card:hover .informations-container .more-information {
opacity: 1;
}
@media (max-width: 768px) {
ul .booking-card::before {
background: rgba(10, 72, 112, 0.6);
}
ul .booking-card .book-container .content {
opacity: 1;
transform: translateY(0px);
}
ul .booking-card .informations-container {
transform: translateY(0px);
}
ul .booking-card .informations-container .more-information {
opacity: 1;
}
}
.credits {
display: table;
background: #0a4870;
color: white;
line-height: 25px;
margin: 10px auto;
padding: 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.credits a {
color: #e3ebf1;
}
h1 {
margin: 10px 20px;
}
That’s all! hopefully, you have successfully created our project. If you have any questions or suggestions, feel free to comment below.
