Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add hover transition and animation effect in allProducts.html and index.html(latest products section and featured product section) #53

Merged
merged 2 commits into from
Oct 4, 2022
Merged

add hover transition and animation effect in allProducts.html and index.html(latest products section and featured product section) #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06772e0
add hover transition and animation effect in allProduct.html and inde…
Aarav238 Oct 3, 2022
c5c9625
Merge branch 'main' into aarav
Aarav238 Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 12 additions & 12 deletions allproducts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h2>Our Products</h2>

</div>
<div class="row">
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<a href="productdetail.html">
<img src="images/product-1.jpg">
</a>
Expand All @@ -75,7 +75,7 @@ <h4>Red Printed T-Shirt</h4>
</div>
<p>Rs. 450</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-2.jpg">
<h4>HRX- Shoes</h4>
<div class="rating">
Expand All @@ -88,7 +88,7 @@ <h4>HRX- Shoes</h4>
</div>
<p>Rs. 600</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-3.jpg">
<h4>Grry Jogger</h4>
<div class="rating">
Expand All @@ -101,7 +101,7 @@ <h4>Grry Jogger</h4>
</div>
<p>Rs. 950</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-4.jpg">
<h4>Navy Blue Puma Tshirt</h4>
<div class="rating">
Expand All @@ -116,7 +116,7 @@ <h4>Navy Blue Puma Tshirt</h4>
</div>
</div>
<div class="row">
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-5.jpg">
<h4>Jogging Shoes</h4>
<div class="rating">
Expand All @@ -129,7 +129,7 @@ <h4>Jogging Shoes</h4>
</div>
<p>Rs. 750</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-6.jpg">
<h4>Puma tshirt</h4>
<div class="rating">
Expand All @@ -142,7 +142,7 @@ <h4>Puma tshirt</h4>
</div>
<p>Rs. 450</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-7.jpg">
<h4>Exclusive socks</h4>
<div class="rating">
Expand All @@ -155,7 +155,7 @@ <h4>Exclusive socks</h4>
</div>
<p>Rs. 50</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-8.jpg">
<h4>Wrist Watch</h4>
<div class="rating">
Expand All @@ -170,7 +170,7 @@ <h4>Wrist Watch</h4>
</div>
</div>
<div class="row">
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-9.jpg">
<h4>Wrist Watch</h4>
<div class="rating">
Expand All @@ -183,7 +183,7 @@ <h4>Wrist Watch</h4>
</div>
<p>Rs. 450</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-10.jpg">
<h4>Black Ranger shoes</h4>
<div class="rating">
Expand All @@ -196,7 +196,7 @@ <h4>Black Ranger shoes</h4>
</div>
<p>Rs. 850</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-11.jpg">
<h4>New style shoes</h4>
<div class="rating">
Expand All @@ -209,7 +209,7 @@ <h4>New style shoes</h4>
</div>
<p>Rs. 450</p>
</div>
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-12.jpg">
<h4>Black jogger Puma</h4>
<div class="rating">
Expand Down
57 changes: 56 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ <h2 class="title">
Featured Products
</h2>
<div class="row">
<div class="col-4" data-aos="fade-up">
<div class="col-4" id="box" data-aos="fade-up">
<a href="productdetail.html">
<img class="zoomForImage" src="images/product-1.jpg">
</a>
Expand All @@ -105,9 +105,14 @@ <h4>Red Printed T-Shirt</h4>
<p>Rs. 500</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-2.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-2.jpg">
<div class="alignmentForText">

<h4>HRX- Shoes</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -120,9 +125,14 @@ <h4>HRX- Shoes</h4>
<p>Rs. 600</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-3.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-3.jpg">
<div class="alignmentForText">

<h4>Grey Jogger</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -135,9 +145,14 @@ <h4>Grey Jogger</h4>
<p>Rs. 950</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-4.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-4.jpg">
<div class="alignmentForText">

<h4>Navy Blue Puma Tshirt</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -155,9 +170,14 @@ <h2 class="title">
Latest Products
</h2>
<div class="row">

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-5.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-5.jpg">
<div class="alignmentForText">

<h4>Jogging Shoes</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -170,9 +190,14 @@ <h4>Jogging Shoes</h4>
<p>Rs. 750</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-6.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-6.jpg">
<div class="alignmentForText">

<h4>Puma tshirt</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -185,9 +210,14 @@ <h4>Puma tshirt</h4>
<p>Rs. 450</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-7.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-7.jpg">
<div class="alignmentForText">

<h4>Exclusive socks</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -200,9 +230,14 @@ <h4>Exclusive socks</h4>
<p>Rs. 50</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-8.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-8.jpg">
<div class="alignmentForText">

<h4>Wrist Watch</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -217,9 +252,14 @@ <h4>Wrist Watch</h4>
</div>
</div>
<div class="row">

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-9.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-9.jpg">
<div class="alignmentForText">

<h4>Wrist Watch</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -232,9 +272,14 @@ <h4>Wrist Watch</h4>
<p>Rs. 450</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-10.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-10.jpg">
<div class="alignmentForText">

<h4>Black Ranger shoes</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -247,9 +292,14 @@ <h4>Black Ranger shoes</h4>
<p>Rs. 850</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-11.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-11.jpg">
<div class="alignmentForText">

<h4>New style shoes</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand All @@ -262,9 +312,14 @@ <h4>New style shoes</h4>
<p>Rs. 450</p>
</div>
</div>

<div class="col-4" id="box" data-aos="fade-up">
<img src="images/product-12.jpg">

<div class="col-4" data-aos="fade-up">
<img class="zoomForImage" src="images/product-12.jpg">
<div class="alignmentForText">

<h4>Black jogger Puma</h4>
<div class="rating">
<!-- for adding star cdn link-> font awesome 4cdn by stackpath -->
Expand Down
73 changes: 73 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -819,3 +819,76 @@ form a {
transform-origin: left;
transform: scaleX(1);
}


/* HOVER ANIMATION */


#box:hover{
transform: scale(1.3);
z-index: 2;


}


/* .glassBox {
width: 100%;
height: 400px;
max-width: 300px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-right-color: rgba(255, 255, 255, 0.1);
border-bottom-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
padding: 15px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.glassBox, .glassBox * {
box-sizing: border-box;
transition: 400ms;
}
.glassBox__imgBox img {
display: block;
width: 100%;
height: auto;
}
.glassBox__title {
text-align: center;
margin-top: 15px;
color: #FFF;
font-size: 20px;
font-weight: 400;
font-family: "Lato";
}
.glassBox__content {
position: absolute;
right: 15px;
bottom: 15px;
left: 15px;
text-align: center;
color: #FFF;
font-size: 14px;
font-family: "Lato";
letter-spacing: 0.1em;
opacity: 0;
} */

.glassBox__imgBox:hover{
transform: scale(1.3);
z-index: 2;

}
/* .glassBox:hover .glassBox__imgBox {
animation-name: bounce;;
} */
/* .glassBox:hover .glassBox__imgBox img { */
/* animation-name: fade-up; */
/* } */