Skip to content

Commit

Permalink
Merge pull request #346 from Varsani2520/img-cards
Browse files Browse the repository at this point in the history 
img card completely done with hover effect
  • Loading branch information
@Anushkabh
Anushkabh authored May 29, 2024
2 parents 64b3032 + c1e91a7 commit 28212d5
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 25 deletions.
2 changes: 1 addition & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
display: flex;
align-items: center;
padding: 0.5rem 1rem;

}
/* .page-header {
margin-bottom: 1rem;
} */
Expand Down
82 changes: 58 additions & 24 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,29 @@
opacity: 0.8;
}

.card1:hover .card-inner {
transform: rotateY(180deg);
}

.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform 0.8s;
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
}
</style>
<!-- Swiper CSS -->
<link rel="stylesheet" href="swiper-bundle.min.css">
Expand Down Expand Up @@ -459,30 +480,43 @@ <h4 class="card-title">
<section id="products" class="products">
<h2 class="title">Products</h2>
<div class="container" style="display: flex; flex-wrap: wrap; ">
<div class="card text-center card1" style="flex: 1 1 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
<img src="assets/img/spinach.jpg" class="card-img-top" alt="Spinach" style="width: 100%; height: 70%; object-fit: cover;">
<div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<h5 class="card-title" style="padding-top: 50px;">Spinach</h5>
<p class="card-text">Healthy and fresh spinach leaves.</p>
<a href="#" class="btn btn-primary" id="toast-btn"style="margin-bottom: 50px;">Add to Cart</a>
</div>
</div>
<div class="card text-center card1" style="flex: 1 1 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
<img src="assets/img/tomato.jpg" class="card-img-top" alt="Tomato" style="width: 100%; height: 70%; object-fit: cover;">
<div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<h5 class="card-title" style="padding-top: 67px;">Tomato</h5>
<p class="card-text">Fresh organic tomatoes directly from our farms.</p>
<a href="#" class="btn btn-primary" id="toast-btn"style="margin-bottom: 50px;">Add to Cart</a>
</div>
</div>
<div class="card text-center card1" style=" max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px;">
<img src="https://t3.ftcdn.net/jpg/04/68/10/86/360_F_468108626_wpL1hcDkE4g12mPPnbVxx8rCnWpHYKmV.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 70%; object-fit: cover;">
<div class="card-body" style="height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<h5 class="card-title" style="padding-top: 50px;">Broccoli</h5>
<p class="card-text">Green and fresh broccoli heads.</p>
<a href="#" class="btn btn-primary" id="toast-btn" style="margin-bottom: 50px;">Add to Cart</a>
</div>
</div>

<div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="assets/img/spinach.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
<h5 class="card-title">Spinach</h5>
<p class="card-text">Healthy and fresh spinach leaves.</p>
<a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
</div>
</div>
</div>
<div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="assets/img/tomato.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
<h5 class="card-title">Tomato</h5>
<p class="card-text">Fresh organic tomatoes directly from our farms.</p>
<a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
</div>
</div>
</div>
<div class="card text-center card1" style="max-width: calc(33.333% - 1rem); height: 450px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 10px; perspective: 1000px; transition: transform 0.8s;">
<div class="card-inner" style="position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; transition: transform 0.8s;">
<div class="card-front" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden;">
<img src="https://t3.ftcdn.net/jpg/04/68/10/86/360_F_468108626_wpL1hcDkE4g12mPPnbVxx8rCnWpHYKmV.jpg" class="card-img-top" alt="Broccoli" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="card-back" style="position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg); background-color: green; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white;">
<h5 class="card-title">Broccoli</h5>
<p class="card-text">Green and fresh broccoli heads.</p>
<a href="#" class="btn btn-primary" id="toast-btn">Add to Cart</a>
</div>
</div>
</div>
</div>
</section>

Expand Down

0 comments on commit 28212d5

Please sign in to comment.