Skip to content

Commit

Permalink
Add Zoom Effect to Images with Class .menu on Hover
Browse files Browse the repository at this point in the history
  • Loading branch information
@harshpareshbhaigosalya
harshpareshbhaigosalya committed Oct 4, 2024
1 parent fc3b213 commit dad7487
Showing 1 changed file with 27 additions and 16 deletions.
43 changes: 27 additions & 16 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@
<link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../Css-files/content.css">
<style>
/* Initial styling for the image */
.menu {
transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
}

/* Zoom effect on hover */
.menu:hover {
transform: scale(1.1); /* Scale the image to 110% of its original size */
}


@media (max-width: 768px) {
.items {
width: 100%;
Expand Down Expand Up @@ -292,7 +303,7 @@ <h2 style="font-family: var(--ff-philosopher);">Entertainment</h2>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/59/aa/2e/59aa2edd369e1017039372ad860cfb8b.jpg">
src="https://i.pinimg.com/564x/59/aa/2e/59aa2edd369e1017039372ad860cfb8b.jpg" class="menu" id="menu1">

<h3 style="font-family: var(--ff-philosopher);">Phonograph</h3>
<p style="font-family: Garamond;">$10.20</p>
Expand All @@ -313,7 +324,7 @@ <h3 style="font-family: var(--ff-philosopher);">Phonograph</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/736x/11/c1/c5/11c1c5ba22a14271bef63012dcaa0631.jpg">
src="https://i.pinimg.com/736x/11/c1/c5/11c1c5ba22a14271bef63012dcaa0631.jpg" class="menu" id="menu2">
<h3 style="font-family: var(--ff-philosopher);">Radio</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.02" data-product-name="Radio"
Expand All @@ -333,7 +344,7 @@ <h3 style="font-family: var(--ff-philosopher);">Radio</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/18/b4/41/18b441458ac78e10345b720d9af453ef.jpg">
src="https://i.pinimg.com/564x/18/b4/41/18b441458ac78e10345b720d9af453ef.jpg" class="menu" id="menu3">
<h3 style="font-family: var(--ff-philosopher);">Television</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.03" data-product-name="Television"
Expand All @@ -351,7 +362,7 @@ <h3 style="font-family: var(--ff-philosopher);">Television</h3>
<img src="../Favicon image/check-mark.png" class="check-mark">
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img src="https://i.pinimg.com/564x/1f/58/7f/1f587fe0533c8b4671fa29685fcaa9c2.jpg">
<img src="https://i.pinimg.com/564x/1f/58/7f/1f587fe0533c8b4671fa29685fcaa9c2.jpg" class="menu" id="menu4">
<h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.04" data-product-name="Movie Screen Carpet"
Expand All @@ -373,7 +384,7 @@ <h3 style="font-family: var(--ff-philosopher);">Movie Screen Carpet</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/33/10/f4/3310f46d5d8b689d844d11fc308a84f5.jpg">
src="https://i.pinimg.com/564x/33/10/f4/3310f46d5d8b689d844d11fc308a84f5.jpg" class="menu" id="menu5">
<h3 style="font-family: var(--ff-philosopher);">Toys</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.05" data-product-name="Toys"
Expand All @@ -392,7 +403,7 @@ <h3 style="font-family: var(--ff-philosopher);">Toys</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/b8/ba/6f/b8ba6fce89bff7963fa9e10d86062a29.jpg">
src="https://i.pinimg.com/564x/b8/ba/6f/b8ba6fce89bff7963fa9e10d86062a29.jpg" class="menu" id="menu6">
<h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.06" data-product-name="Puppet Show"
Expand All @@ -411,7 +422,7 @@ <h3 style="font-family: var(--ff-philosopher);">Puppet Show</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/56/5e/b4/565eb4a4263d6020ed2133b8a4b14991.jpg">
src="https://i.pinimg.com/564x/56/5e/b4/565eb4a4263d6020ed2133b8a4b14991.jpg" class="menu" id="menu7">
<h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.07" data-product-name="Marbles"
Expand All @@ -429,7 +440,7 @@ <h3 style="font-family: var(--ff-philosopher);">Marbles</h3>
<img src="../Favicon image/check-mark.png" class="check-mark">
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img src="https://i.pinimg.com/564x/29/cb/76/29cb764ce3d9b2407a3dfa41c8b3ceeb.jpg">
<img src="https://i.pinimg.com/564x/29/cb/76/29cb764ce3d9b2407a3dfa41c8b3ceeb.jpg" class="menu" id="menu8">
<h3 style="font-family: var(--ff-philosopher);">Drinks</h3>
<p style="font-family: Garamond;">$10.20</p>
<button class="butt add-to-cart-button" data-product-id="1.08" data-product-name="Drinks"
Expand Down Expand Up @@ -459,7 +470,7 @@ <h2 style="font-family: var(--ff-philosopher);">Gadgets</h2>
</div>
<img

src="https://i0.wp.com/www.printmag.com/wp-content/uploads/2011/11/2a34d8_8fd22c546762416496eb8ab0c88c3db4mv2.jpg">
src="https://i0.wp.com/www.printmag.com/wp-content/uploads/2011/11/2a34d8_8fd22c546762416496eb8ab0c88c3db4mv2.jpg" class="menu" id="menu16">

<h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
<p style="font-family: Garamond;">$5.10</p>
Expand All @@ -479,7 +490,7 @@ <h3 style="font-family: var(--ff-philosopher);">Telephone</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/22/dd/23/22dd2351b72eb11a7d5b040caa484188.jpg">
src="https://i.pinimg.com/564x/22/dd/23/22dd2351b72eb11a7d5b040caa484188.jpg" class="menu" id="menu9">
<h3 style="font-family: var(--ff-philosopher);">Pager</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.02" data-product-name="Pager"
Expand All @@ -498,7 +509,7 @@ <h3 style="font-family: var(--ff-philosopher);">Pager</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/0a/5f/a2/0a5fa201b0cdfd24323b07d9423b53ed.jpg">
src="https://i.pinimg.com/564x/0a/5f/a2/0a5fa201b0cdfd24323b07d9423b53ed.jpg" class="menu" id="menu10">
<h3 style="font-family:var(--ff-philosopher);">Camera</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="Snacks" data-product-name="Camera"
Expand All @@ -516,7 +527,7 @@ <h3 style="font-family:var(--ff-philosopher);">Camera</h3>
<img src="../Favicon image/check-mark.png" class="check-mark">
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img src="https://i.pinimg.com/564x/51/1b/f5/511bf5dad0334204d182a0828850ca35.jpg">
<img src="https://i.pinimg.com/564x/51/1b/f5/511bf5dad0334204d182a0828850ca35.jpg" class="menu" id="menu11">
<h3 style="font-family: var(--ff-philosopher);">Type Writer</h3>
<p style="font-family: Garamond;">$5.10</p>
<button class="butt add-to-cart-button" data-product-id="2.04" data-product-name="Type Writer" style="font-family: Garamond;"
Expand All @@ -540,7 +551,7 @@ <h2>Weapons & Transport</h2>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/ca/83/ef/ca83ef07ebddf2e5b4a6210575342737.jpg">
src="https://i.pinimg.com/564x/ca/83/ef/ca83ef07ebddf2e5b4a6210575342737.jpg" class="menu" id="menu12">
<h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.01" data-product-name="Cross Bow"
Expand All @@ -559,7 +570,7 @@ <h3 style="font-family: var(--ff-philosopher);">Cross Bow</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/ec/27/3a/ec273a4e8ea84196a1bc4f3e5e0a8527.jpg">
src="https://i.pinimg.com/564x/ec/27/3a/ec273a4e8ea84196a1bc4f3e5e0a8527.jpg" class="menu" id="menu13">
<h3 style="font-family: var(--ff-philosopher);">Catapult</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.02" data-product-name="Catapult"
Expand All @@ -578,7 +589,7 @@ <h3 style="font-family: var(--ff-philosopher);">Catapult</h3>
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img
src="https://i.pinimg.com/564x/b1/c1/1c/b1c11cfdf073f1565d1546ee18f1028a.jpg">
src="https://i.pinimg.com/564x/b1/c1/1c/b1c11cfdf073f1565d1546ee18f1028a.jpg" class="menu" id="menu14">
<h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.03" data-product-name="Sedan Chair"
Expand All @@ -596,7 +607,7 @@ <h3 style="font-family: var(--ff-philosopher);">Sedan Chair</h3>
<img src="../Favicon image/check-mark.png" class="check-mark">
<div style="margin-top: -3px; margin-left: 3px;">Added to cart</div>
</div>
<img src="https://ahdictionary.com/application/resources/arts/A5palanquin.jpg">
<img src="https://ahdictionary.com/application/resources/arts/A5palanquin.jpg" class="menu" id="menu15">
<h3 style="font-family:var(--ff-philosopher);">Palsnkin</h3>
<p style="font-family: Garamond;">$15.80</p>
<button class="butt add-to-cart-button" data-product-id="3.04" data-product-name="Palsnkin"
Expand Down

0 comments on commit dad7487

Please sign in to comment.