Cards: Hover effects
Different types of effect when the user hovers over the card component.
Around component
Image zoom
<!-- Image zoom effect on hover. Can be combined with other effects like content overlay and lift. -->
<div class="card zoom-effect border-0 rounded-4 overflow-hidden">
<span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-10 zindex-2"></span>
<div class="zoom-effect-wrapper">
<img src="assets/img/shop/categories/04.jpg" class="zoom-effect-img" alt="Category image">
</div>
<a href="#" class="card-body d-flex flex-column justify-content-end align-items-start position-absolute top-0 start-0 w-100 h-100 text-decoration-none zindex-3">
<span class="bg-light text-dark rounded-pill fs-sm fw-semibold lh-1 py-3 px-4">
For the bedroom
</span>
</a>
</div>// Image zoom effect on hover. Can be combined with other effects like content overlay and lift
.card.zoom-effect.border-0.rounded-4.overflow-hidden
span.position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-10.zindex-2
.zoom-effect-wrapper
img(src="assets/img/shop/categories/04.jpg", alt="Category image").zoom-effect-img
a(href="#").card-body.d-flex.flex-column.justify-content-end.align-items-start.position-absolute.top-0.start-0.w-100.h-100.text-decoration-none.zindex-3
span.bg-light.text-dark.rounded-pill.fs-sm.fw-semibold.lh-1.py-3.px-4
| For the bedroom
Lift
<!-- Lift card up on hover. Can be combined with other effects like content overlay and zoom -->
<a href="#" class="card-hover card-lifted d-inline-block text-center text-decoration-none">
<img src="assets/img/landing/yoga-studio/trainers/01.jpg" class="card-lifted d-block rounded-5 mb-3" width="340" alt="Michelle Yang">
<h3 class="h5 mb-1">Michelle Yang</h3>
<p class="text-muted mb-0">Fly-yoga trainer</p>
</a>// Lift card up on hover. Can be combined with other effects like content overlay and lift
a(href="#").card-hover.card-lifted.d-inline-block.text-center.text-decoration-none
img(src="assets/img/landing/yoga-studio/trainers/01.jpg", width="340", alt="Michelle Yang").card-lifted.d-block.rounded-5.mb-3
h3.h5.mb-1 Michelle Yang
p.text-muted.mb-0 Fly-yoga trainer
Flip 1
<!-- Flip card on hover to reveal more content -->
<a href="#" class="card-flip">
<div class="card-flip-inner">
<div class="card-flip-front" style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);">
<div class="d-flex flex-column h-100 ignore-dark-mode">
<h2 class="fs-lg fw-normal mb-0 mt-auto">Branding</h2>
</div>
</div>
<div class="card-flip-back bg-secondary">
<div class="d-flex flex-column h-100 px-sm-2 pt-sm-2 px-lg-0 pt-lg-0 px-xl-3 pt-xl-3">
<h3 class="h4">Branding</h3>
<ul class="text-body ps-4 mb-3">
<li class="mb-2">Identity design</li>
<li class="mb-2">Brand book creation</li>
<li class="mb-2">Colors and fonts</li>
<li class="mb-2">Banners and covers</li>
<li class="mb-1">Visual style</li>
</ul>
<div class="text-end pt-3 pt-sm-2 pt-xl-4 mt-auto me-sm-n2 me-lg-0 me-xl-n3">
<div class="btn btn-sm btn-icon btn-outline-primary rounded-circle">
<i class="ai-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
</a>// Flip card on hover to reveal more content
a(href="#").card-flip
.card-flip-inner
.card-flip-front(style="background-image: url(assets/img/landing/creative-agency/services/03.jpg);")
.d-flex.flex-column.h-100.ignore-dark-mode
h2.fs-lg.fw-normal.mb-0.mt-auto
| Branding
.card-flip-back.bg-secondary
.d-flex.flex-column.h-100.px-sm-2.pt-sm-2.px-lg-0.pt-lg-0.px-xl-3.pt-xl-3
h3.h4 Branding
ul.text-body.ps-4.mb-3
li.mb-2 Identity design
li.mb-2 Brand book creation
li.mb-2 Colors and fonts
li.mb-2 Banners and covers
li.mb-1 Visual style
.text-end.pt-3.pt-sm-2.pt-xl-4.mt-auto.me-sm-n2.me-lg-0.me-xl-n3
.btn.btn-sm.btn-icon.btn-outline-primary.rounded-circle
i.ai-arrow-right
Flip 2
Figma is convenient online service for interface development and prototyping with the ability to work together in real time.
<!-- Flip card on hover to reveal more content -->
<div class="card card-flip card-hover border-0 bg-secondary w-sm-auto h-100 rounded-5 text-center" style="max-width: 306px;">
<div class="card-flip-inner mx-auto">
<div class="card-flip-front p-0">
<div class="card-body d-flex flex-column justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 opacity-100">
<img src="assets/img/landing/web-studio/skills/figma.svg" width="72" alt="Figma">
</div>
</div>
<div class="card-flip-back p-0 bg-transparent">
<div class="card-body d-flex flex-column justify-content-center align-items-center h-100">
<img src="assets/img/landing/web-studio/skills/figma.svg" width="52" alt="Figma">
<p class="fs-sm pt-3 mb-0">Figma is convenient online service for interface development and prototyping with the ability to work together in real time.</p>
</div>
</div>
</div>
</div>// Flip card on hover to reveal more content
.card.card-flip.card-hover.border-0.bg-secondary.w-sm-auto.h-100.rounded-5.text-center(style="max-width: 306px;")
.card-flip-inner.mx-auto
.card-flip-front.p-0
.card-body.d-flex.flex-column.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.opacity-100
img(src="assets/img/landing/web-studio/skills/figma.svg", width="72", alt="Figma")
.card-flip-back.p-0.bg-transparent
.card-body.d-flex.flex-column.justify-content-center.align-items-center.h-100
img(src="assets/img/landing/web-studio/skills/figma.svg", width="52", alt="Figma")
p.fs-sm.pt-3.mb-0
| Figma is convenient online service for interface development and prototyping with the ability to work together in real time.
Color
<!-- Change background and content color of the card on hover -->
<a href="#" class="card card-hover-primary bg-secondary border-0 h-100 text-decoration-none">
<div class="card-body pb-0">
<svg class="d-block text-warning mb-4" width="40" height="40" viewBox="0 0 40 40" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M1.7276 27.5001C1.21683 28.3857 0.916576 29.3769 0.850062 30.3971C0.783549 31.4173 0.952558 32.4391 1.34402 33.3835C1.73548 34.328 2.33891 35.1697 3.10764 35.8437C3.87638 36.5177 4.78982 37.0058 5.77734 37.2704C6.76486 37.5349 7.8 37.5689 8.80272 37.3695C9.80544 37.1701 10.7489 36.7428 11.5601 36.1206C12.3713 35.4983 13.0285 34.6979 13.4809 33.7811C13.9334 32.8643 14.1689 31.8558 14.1693 30.8334C14.1698 29.3654 13.6858 27.9382 12.7924 26.7734C11.8989 25.6085 10.6459 24.7712 9.22787 24.3913C7.80984 24.0114 6.30606 24.1101 4.94991 24.6722C3.59375 25.2344 2.46105 26.2284 1.7276 27.5001Z"></path>
<path d="M11.7344 10.1667L4.23438 23.1667C5.42383 22.6595 6.71498 22.4361 8.00568 22.5142C9.29638 22.5922 10.5512 22.9695 11.6709 23.6163C12.7906 24.263 13.7444 25.1615 14.4569 26.2405C15.1694 27.3196 15.621 28.5496 15.776 29.8333L19.0427 24.1667C12.8427 13.45 11.9427 12.425 11.7344 10.1667Z"></path>
<path d="M38.2784 27.5C37.8534 26.7833 25.6701 5.6083 25.4284 5.29996C24.4255 3.9011 22.9204 2.94436 21.2281 2.62997C19.5358 2.31559 17.7875 2.66792 16.3491 3.61323C14.9107 4.55855 13.8936 6.02357 13.5108 7.70171C13.1279 9.37984 13.409 11.141 14.2951 12.6166C14.2118 12.6166 13.8784 11.9 26.7284 34.1666C27.1662 34.925 27.749 35.5898 28.4437 36.1229C29.1383 36.656 29.9311 37.0471 30.7769 37.2739C31.6227 37.5006 32.5049 37.5585 33.373 37.4443C34.2412 37.3301 35.0784 37.046 35.8368 36.6083C36.5952 36.1706 37.2599 35.5877 37.793 34.8931C38.3262 34.1984 38.7173 33.4056 38.944 32.5598C39.1707 31.714 39.2287 30.8319 39.1145 29.9637C39.0003 29.0955 38.7162 28.2583 38.2784 27.5Z"></path>
</svg>
<h3 class="h4 card-title mt-0">Advertising campaigns</h3>
<p class="card-text">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint velit officia consequat duis enim velit mollit.</p>
</div>
<div class="card-footer border-0 py-3 my-3 mb-sm-4">
<div class="btn btn-lg btn-icon btn-outline-primary rounded-circle pe-none"><i class="ai-arrow-right"></i></div>
</div>
</a>// Change background and content color of the card on hover
a(href="#").card.card-hover-primary.bg-secondary.border-0.h-100.text-decoration-none
.card-body.pb-0
svg(width="40", height="40", viewBox="0 0 40 40", fill="currentColor", xmlns="http://www.w3.org/2000/svg").d-block.text-warning.mb-4
path(d="M1.7276 27.5001C1.21683 28.3857 0.916576 29.3769 0.850062 30.3971C0.783549 31.4173 0.952558 32.4391 1.34402 33.3835C1.73548 34.328 2.33891 35.1697 3.10764 35.8437C3.87638 36.5177 4.78982 37.0058 5.77734 37.2704C6.76486 37.5349 7.8 37.5689 8.80272 37.3695C9.80544 37.1701 10.7489 36.7428 11.5601 36.1206C12.3713 35.4983 13.0285 34.6979 13.4809 33.7811C13.9334 32.8643 14.1689 31.8558 14.1693 30.8334C14.1698 29.3654 13.6858 27.9382 12.7924 26.7734C11.8989 25.6085 10.6459 24.7712 9.22787 24.3913C7.80984 24.0114 6.30606 24.1101 4.94991 24.6722C3.59375 25.2344 2.46105 26.2284 1.7276 27.5001Z")
path(d="M11.7344 10.1667L4.23438 23.1667C5.42383 22.6595 6.71498 22.4361 8.00568 22.5142C9.29638 22.5922 10.5512 22.9695 11.6709 23.6163C12.7906 24.263 13.7444 25.1615 14.4569 26.2405C15.1694 27.3196 15.621 28.5496 15.776 29.8333L19.0427 24.1667C12.8427 13.45 11.9427 12.425 11.7344 10.1667Z")
path(d="M38.2784 27.5C37.8534 26.7833 25.6701 5.6083 25.4284 5.29996C24.4255 3.9011 22.9204 2.94436 21.2281 2.62997C19.5358 2.31559 17.7875 2.66792 16.3491 3.61323C14.9107 4.55855 13.8936 6.02357 13.5108 7.70171C13.1279 9.37984 13.409 11.141 14.2951 12.6166C14.2118 12.6166 13.8784 11.9 26.7284 34.1666C27.1662 34.925 27.749 35.5898 28.4437 36.1229C29.1383 36.656 29.9311 37.0471 30.7769 37.2739C31.6227 37.5006 32.5049 37.5585 33.373 37.4443C34.2412 37.3301 35.0784 37.046 35.8368 36.6083C36.5952 36.1706 37.2599 35.5877 37.793 34.8931C38.3262 34.1984 38.7173 33.4056 38.944 32.5598C39.1707 31.714 39.2287 30.8319 39.1145 29.9637C39.0003 29.0955 38.7162 28.2583 38.2784 27.5Z")
h3.h4.card-title.mt-0 Advertising campaigns
p.card-text Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint velit officia consequat duis enim velit mollit.
.card-footer.border-0.py-3.my-3.mb-sm-4
.btn.btn-lg.btn-icon.btn-outline-primary.rounded-circle.pe-none
i.ai-arrow-right
Content overlay
<!-- Show hidden content on top of the image on hover -->
<a href="#" class="card-hover d-block">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-5 overflow-hidden zindex-2 opacity-0">
<div class="position-relative zindex-2 text-center">
<i class="ai-instagram lead text-white mb-2"></i>
<div class="fs-sm fw-semibold text-white">#createx_std_image</div>
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-black opacity-30"></div>
</div>
<img src="assets/img/landing/yoga-studio/instagram/02.jpg" class="d-block rounded-5" alt="Instagram image">
</a>// Show hidden content on top of the image on hover
a(href="#").card-hover.d-block
.d-flex.justify-content-center.align-items-center.position-absolute.top-0.start-0.w-100.h-100.rounded-5.overflow-hidden.zindex-2.opacity-0
.position-relative.zindex-2.text-center
i.ai-instagram.lead.text-white.mb-2
.fs-sm.fw-semibold.text-white
| #createx_std_image
.position-absolute.top-0.start-0.w-100.h-100.bg-black.opacity-30
img(src="assets/img/landing/yoga-studio/instagram/02.jpg", alt="Instagram image").d-block.rounded-5
Image overlay 1
<!-- Show hidden image on top of the content on hover -->
<a href="#" class="card card-hover h-100 border-0 bg-secondary rounded-4 text-decoration-none overflow-hidden">
<div class="card-body d-flex align-items-end position-absolute top-0 start-0 w-100 h-100 opacity-0 bg-size-cover bg-position-center pb-4" style="background-image: url(assets/img/landing/corporate/services/04.jpg);">
<div class="btn btn-icon btn-lg btn-outline-light rounded-circle pe-none mb-3">
<i class="ai-arrow-right"></i>
</div>
</div>
<div class="card-body pb-3">
<svg class="d-block mt-1 mt-sm-0 mb-4" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g class="text-info">
<path d="M34.9811 16.2655C34.3635 26.3194 26.3194 34.3634 16.2656 34.981V40H40V16.2655H34.9811Z" fill="currentColor"></path>
</g>
<g class="text-info">
<path d="M15.0195 30.0413C23.3152 30.0413 30.0403 23.3163 30.0403 15.0205H15.0195V30.0413Z" fill="currentColor"></path>
</g>
<g class="text-primary">
<path d="M29.1953 10.0415C27.141 4.19328 21.571 0 15.0208 0C6.725 0 0 6.725 0 15.0208C0 21.571 4.19328 27.141 10.0415 29.1953V10.0415H29.1953Z" fill="currentColor"></path>
</g>
</svg>
<h3 class="h4">Email marketing</h3>
<p class="mb-0">Adipiscing posuere dui, amet, augue nisl dictum justo enier sed neque congue non quam ultrices interdum vitae vestibulumaute irure dolor in reprehenderit in.</p>
</div>
<div class="card-footer border-0 pt-3 mb-3">
<div class="btn btn-icon btn-lg btn-outline-primary rounded-circle pe-none">
<i class="ai-arrow-right"></i>
</div>
</div>
</a>// Show hidden image on top of the content on hover
a(href="#").card.card-hover.h-100.border-0.bg-secondary.rounded-4.text-decoration-none.overflow-hidden
.card-body.d-flex.align-items-end.position-absolute.top-0.start-0.w-100.h-100.opacity-0.bg-size-cover.bg-position-center.pb-4(style="background-image: url(assets/img/landing/corporate/services/04.jpg);")
.btn.btn-icon.btn-lg.btn-outline-light.rounded-circle.pe-none.mb-3
i.ai-arrow-right
.card-body.pb-3
svg(width="40", height="40", viewBox="0 0 40 40", xmlns="http://www.w3.org/2000/svg").d-block.mt-1.mt-sm-0.mb-4
g.text-info
path(d="M34.9811 16.2655C34.3635 26.3194 26.3194 34.3634 16.2656 34.981V40H40V16.2655H34.9811Z", fill="currentColor")
g.text-info
path(d="M15.0195 30.0413C23.3152 30.0413 30.0403 23.3163 30.0403 15.0205H15.0195V30.0413Z", fill="currentColor")
g.text-primary
path(d="M29.1953 10.0415C27.141 4.19328 21.571 0 15.0208 0C6.725 0 0 6.725 0 15.0208C0 21.571 4.19328 27.141 10.0415 29.1953V10.0415H29.1953Z", fill="currentColor")
h3.h4 Email marketing
p.mb-0 Adipiscing posuere dui, amet, augue nisl dictum justo enier sed neque congue non quam ultrices interdum vitae vestibulumaute irure dolor in reprehenderit in.
.card-footer.border-0.pt-3.mb-3
.btn.btn-icon.btn-lg.btn-outline-primary.rounded-circle.pe-none
i.ai-arrow-right
Image overlay 2
Spa area
Orci purus, in tellus sit bibendum scelerisque adipiscing venenatis.
<!-- Show hidden image on top of the content on hover -->
<div class="card border-0 bg-secondary card-hover h-100 py-4" style="max-width: 306px;">
<div class="opacity-0 position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center rounded-5" style="background-image: url(../assets/img/landing/yoga-studio/features/spa-area.jpg);"></div>
<div class="card-body text-center">
<i class="ai-spa h1 fw-normal text-primary d-block mb-4"></i>
<h3>Spa area</h3>
<p class="card-text">Orci purus, in tellus sit bibendum scelerisque adipiscing venenatis.</p>
</div>
</div>// Show hidden image on top of the content on hover
.card.border-0.bg-secondary.card-hover.h-100.py-4(style="max-width: 306px;")
.opacity-0.position-absolute.top-0.start-0.w-100.h-100.bg-size-cover.bg-position-center.rounded-5(style="background-image: url(assets/img/landing/yoga-studio/features/spa-area.jpg);")
.card-body.text-center
i.ai-spa.h1.fw-normal.text-primary.d-block.mb-4
h3 Spa area
p.card-text Orci purus, in tellus sit bibendum scelerisque adipiscing venenatis.