I need a code for flex card slider using html/css please check the slide in the link for reference. I tried the following code but it shows the right side picture the biggest but I want the left side picture which is the first picture the biggest of all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.card-slider {
display: flex;
overflow: hidden;
}
.card {
width: 100px; /* Set your initial width /
transition: width 0.3s ease; / Add transition for smooth effect /
}
.card:hover {
width: 150px; / Set the width you want on hover */
}
</style>
</head>
<body>
<div class="card-slider">
<div class="card">
<!-- Your card content goes here -->
<img src="image_1.jpg" alt="Image 1">
</div>
<div class="card">
<!-- Your card content goes here -->
<img src="image_2.jpg" alt="Image 2">
</div>
<div class="card">
<!-- Your card content goes here -->
<img src="image_2.jpg" alt="Image 3">
</div>
</div>
</body>
</html>