Para crear un efecto de tarjetas impactante usando Bootstrap y un diseño de cuadrícula con efectos de hover, te propongo un diseño que cuenta con una animación al pasar el ratón sobre cada tarjeta, ampliando la imagen y mostrando una capa de información sobre ella. Esto se puede lograr con HTML, CSS y un poco de JavaScript para un efecto opcional de desplazamiento.
Estructura del Código
HTML: Definimos las tarjetas en una cuadrícula de Bootstrap.
CSS: Aplicamos estilos personalizados para el efecto de hover.
JavaScript/jQuery: Opcional, para añadir una animación de desplazamiento suave si se desea.
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarjetas Impactantes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container my-5">
<div class="row">
<!-- Tarjeta 1 -->
<div class="col-md-4 mb-4">
<div class="card-custom">
<div class="card-image">
<img src="https://via.placeholder.com/300" alt="Imagen 1">
<div class="overlay">
<h5>Tarjeta 1</h5>
<p>Descripción impactante sobre esta tarjeta.</p>
</div>
</div>
</div>
</div>
<!-- Tarjeta 2 -->
<div class="col-md-4 mb-4">
<div class="card-custom">
<div class="card-image">
<img src="https://via.placeholder.com/300" alt="Imagen 2">
<div class="overlay">
<h5>Tarjeta 2</h5>
<p>Otra descripción impresionante.</p>
</div>
</div>
</div>
</div>
<!-- Tarjeta 3 -->
<div class="col-md-4 mb-4">
<div class="card-custom">
<div class="card-image">
<img src="https://via.placeholder.com/300" alt="Imagen 3">
<div class="overlay">
<h5>Tarjeta 3</h5>
<p>Texto que atrae la atención aquí.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>Código CSS
Este archivo define los efectos de hover y personaliza el diseño de las tarjetas.
/* Estilos para tarjetas personalizadas */
.card-custom {
position: relative;
overflow: hidden;
border-radius: 10px;
transition: transform 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.card-custom:hover {
transform: scale(1.05);
}
.card-image {
position: relative;
width: 100%;
height: 100%;
}
.card-image img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.card-custom:hover img {
transform: scale(1.2);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transition: opacity 0.3s;
padding: 20px;
}
.card-custom:hover .overlay {
opacity: 1;
}
.overlay h5 {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
}
.overlay p {
margin-top: 10px;
font-size: 1rem;
opacity: 0.8;
}Código Javascript
Para añadir una animación de desplazamiento suave cuando el usuario hace clic en una tarjeta, podemos usar el siguiente código en jQuery. Este es opcional y depende del efecto que quieras lograr.
$(document).ready(function() {
$('.card-custom').on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 800);
});
});Explicación de los efectos
Escala en Hover: La tarjeta se amplía ligeramente (scale(1.05)) al pasar el ratón sobre ella.
Escala de Imagen: La imagen dentro de la tarjeta se amplía (scale(1.2)) y proporciona un efecto de «zoom».
Capa de Overlay: Aparece una capa de color oscuro sobre la imagen cuando el usuario pasa el ratón, revelando el título y la descripción de la tarjeta.
Desplazamiento Suave (Opcional): Añade un desplazamiento suave al hacer clic en la tarjeta, desplazando la página hacia la tarjeta seleccionada.
Este código es compatible con Bootstrap 5 y puede adaptarse a múltiples usos dentro de un proyecto web. Si tienes interés en conocer más trucos sobre programación web te invito a que visites mi página web, la de linkedin, mis redes sociales o mi newsletter en linkedin. Únete a mis redes sociales y, si te gusta mi contenido, compartelo.