Animation

Added hover animation to images
boudywho · Feb 14, 2024 · 7523783 · 7523783
1 parent b755d04
commit 7523783
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/style.css b/style.css
@@ -24,9 +24,14 @@ img {
   width: 350px;
   margin-right: 2em;
   border-radius: 5px;
+  transition: transform 0.2s ease-in-out;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
 
+img:hover {
+  transform: scale(1.05);  /* Increase image size by 10% */
+}
+
 nav {
   display: grid;
   grid-row-gap: 1em;

diff --git a/stylelinks.css b/stylelinks.css
@@ -24,9 +24,14 @@ img {
   width: 350px;
   margin-right: 2em;
   border-radius: 5px;
+  transition: transform 0.2s ease-in-out;
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
 }
 
+img:hover {
+  transform: scale(1.05);  /* Increase image size by 10% */
+}
+
 nav {
   display: grid;
   grid-row-gap: 1em;