Card animadas
Las card son uno de los componentes más utilizados en los sitios webs que usan bootstrap. Es por ello que veamos algunas ideas sobre efectos que podemos aplicar a estas cards con algo de CSS.
Efectos con hover
Los efectos con la pseudoclase :hover, se activan cuando nos posicionamos con el mouse por encima de los elementos. Veamos algunos de los casos más comunes.
Zoom In - Out
Este efecto es bastante sencillo, ya que se trata de cambiar el valor de una propiedad CSS al momento de activar el evento hover, el elemento debe tener una transición para la propiedad transform que dure los segundos que deseamos y finalmente la transición sea en ease.
zoom sobre la card
Robo aleatorio
Robo aleatorio
Robo aleatorio
Robo aleatorio
<style>
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css');
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: scale(1.15);
}
</style>
<div class="card bg-secondary" style="width: 280px">
<img src="//robohash.org/1" class="card-img-top" alt="card de robot 1" />
<div class="card-body">
<h3 class="card-title">Robot aleatorio</h3>
</div>
</div>
zoom sobre la imagen de la card
Aleatoria
Aleatoria
Aleatoria
Aleatoria
<style>
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css');
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
transition: transform 0.2s ease;
}
.card-header {
overflow: hidden;
}
.card-header img {
transition: all 0.2s ease;
}
.card-header img:hover {
transform: scale(1.15);
}
</style>
<div class="card bg-body" style="width: 280px">
<div class="card-header p-0">
<img
src="//picsum.photos/290/290"
class="img-fluid"
alt="imagen aleatoria"
/>
</div>
<div class="card-body">
<h5 class="card-title">Aleatoria</h5>
</div>
</div>
Fade in - out
Este efecto es otro que en lo personal me agrada bastante y muy fácil de hacer, ya que en este caso se trata de cambiar el valor de la propiedad CSS opacity al momento de activar el evento hover, el elemento como vimos anteriormente debe tener una transición sobre la propiedad que va a cambiar en este caso opacity que dure los segundos que deseamos y finalmente la transición sea en ease.
<style>
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css');
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 100%;
max-width: 300px;
background: var(--i);
background-size: cover;
}
.card-body {
padding: 5rem 2rem;
background: rgba(0, 0, 0, 0.5);
color: #fff;
opacity: 0;
transition: opacity 0.3s ease;
}
.card-body:hover {
opacity: 1;
}
</style>
<div class="card" style="--i: url(//picsum.photos/290/290)">
<div class="card-body text-center">
<h4 class="card-title">Hola</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur aut
perspiciatis, vel impedit quis tempora alias eum.
</p>
</div>
</div>
Pulse
Este es un efecto que consiste en escalar nuestras cards, pero para ello necesitaremos usar una animación que es bastante simple, para las animaciones en CSS necesitamos declarar una directiva @keyframes un nombre para la animación y los selectores.
robohash.org
robohash.org
robohash.org
robohash.org
<style>
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css');
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 100%;
max-width: 300px;
}
.card:hover {
animation: pulse 0.6s infinite alternate;
}
@keyframes pulse {
from {
transform: scale(1);
}
to {
transform: scale(1.02);
}
}
</style>
<div class="card bg-danger">
<div class="card-body text-center">
<img src="//robohash.org/9" class="img-fluid" />
<div class="card-body">
<h6 class="card-title">robohash.org</h6>
<p class="card-text">Robot aleatorio</p>
</div>
</div>
</div>
