About Lesson
Advanced Customization & Hover Effects
- Adding hover effects: Hovering over the card will increase size & add a shadow
- Using CSS for advanced styling
Example: Card with Hover Effect
HTML
<style>
.card:hover {
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
transform: scale(1.05);
transition: 0.3s ease-in-out;
}
</style>
<div class="card">
<div class="card-body">
<h5 class="card-title">Hover Card</h5>
<p class="card-text">Hover over this card to see the effect.</p>
</div>
</div>
Output:
