Hover Animations Pic

added hover effect, for some reason, it got removed
boudywho · May 17, 2024 · 1bbc1ca · 1bbc1ca
1 parent 7c16565
commit 1bbc1ca
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/index.js b/index.js
@@ -23,4 +23,4 @@ function addZero(i) {
 	return i;
 }
 
-showTime();
+showTime();
diff --git a/style.css b/style.css
@@ -36,25 +36,21 @@ body {
   display: flex;
   flex-direction: column; 
   align-items: center; 
-  margin-top: 13em; /* Adjust this for vertical positioning */
+  margin-top: 13em; 
+  transition: transform 0.3s ease; /* Add transition to the container */
 }
 
 .profile-image {
   height: 500px;
   width: 300px;
   border-radius: 10px;
   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;
-  transition: transform 0.3s ease; 
-  opacity: 0; /* Initially hidden */
-  animation: slideIn 1.2s ease-in-out forwards; /* Slide in after container */
-}
-
-.profile-image:hover {
-  transform: rotateY(10deg); 
+  opacity: 0; 
+  animation: slideIn 1.2s ease-in-out forwards;
 }
 
-nav {
-  width: 100%; 
+.image-container:hover {  /* Apply hover to the container */
+  transform: rotateY(-10deg) rotateX(-5deg) scale(1.065); 
 }
 
 h1 {

diff --git a/stylelinks.css b/stylelinks.css
@@ -34,23 +34,23 @@ body {
   margin-right: 3em;
   perspective: 1000px; 
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 13em; /* Adjust this value to control vertical position */
+  flex-direction: column; 
+  align-items: center; 
+  margin-top: 13em; 
+  transition: transform 0.3s ease; /* Add transition to the container */
 }
 
 .profile-image {
   height: 500px;
   width: 300px;
   border-radius: 10px;
   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;
-  transition: transform 0.3s ease; 
-  opacity: 0; /* Initially hidden */
-  animation: slideIn 1.2s ease-in-out forwards; /* Slide in after container */
+  opacity: 0; 
+  animation: slideIn 1.2s ease-in-out forwards;
 }
 
-.profile-image:hover {
-  transform: rotateY(10deg); 
+.image-container:hover {  /* Apply hover to the container */
+  transform: rotateY(-10deg) rotateX(-5deg) scale(1.065); 
 }
 
 nav {