Merge pull request #554 from codeseker/fix/image-hover-smoothness

fix: Fix Image hover smoothness
piyushg-07 · Jun 14, 2024 · 5d65c37 · 5d65c37
2 parents 9eb465d + c5d33a8
commit 5d65c37
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 47 deletions.
diff --git a/css/sec2.css b/css/sec2.css
@@ -1,18 +1,19 @@
-:root{
+:root {
     --element-color: black;
-    --element1-color:rgba(0, 0, 0, 0.5);
-    --element2-color:rgba(0, 0, 0, 0.8);
+    --element1-color: rgba(0, 0, 0, 0.5);
+    --element2-color: rgba(0, 0, 0, 0.8);
 
 }
 
 
-.sec2buttons{
+.sec2buttons {
     position: absolute;
     top: 23rem;
     width: 20rem;
     margin-left: 3rem;
 }
-.sec2btn2{
+
+.sec2btn2 {
     cursor: pointer;
     height: 2.5rem;
     width: 7.2rem;
@@ -27,16 +28,18 @@
     font-weight: bold;
 
 }
-.sec2btn2-recent:hover{
+
+.sec2btn2-recent:hover {
     color: #fff;
     background-color: #ff765d;
 }
 
-.sec2 img:hover{
+.sec2 img:hover {
     transform: scale(1.1);
 }
+
 /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-.sec2content{
+.sec2content {
     /* border: 1px solid black; */
     width: 100%;
     height: auto;
@@ -45,22 +48,25 @@
     justify-content: center;
     align-items: center;
     margin-left: 1rem;
-    
+
 }
-.sec2content>img{
+
+.sec2content>img {
     height: 23rem;
     width: 29rem;
     object-fit: fill;
     margin: 0 4rem;
     border-radius: 2rem;
+    transition: all 0.3s ease-in-out;
 }
 
-.s2text{
+.s2text {
     /* border: 1px solid green; */
     width: 35rem;
     padding: 1rem;
     /* margin: 0 3vw; */
 }
+
 /* .div{
     margin: 1.3vw 0;
     font-family: 'Poppins';
@@ -69,7 +75,7 @@
     font-size: 0.9em;
     line-height: 30px;
      color: var(--element1-color)} */
-.s2text h1{
+.s2text h1 {
     margin: 1rem 0;
     font-size: 1.8rem;
     font-family: 'Poppins';
@@ -78,7 +84,8 @@
     line-height: 42px;
     color: var(--element-color);
 }
-.s2text p{
+
+.s2text p {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 500;
@@ -87,16 +94,19 @@
     color: var(--element-color);
 
 }
-.author{
+
+.author {
     display: flex;
     align-items: center;
     margin-top: 1rem;
 }
-.author>img{
+
+.author>img {
     height: 3rem;
     width: 3rem;
     border-radius: 10rem;
 }
-.authorsname{
+
+.authorsname {
     margin-left: 1rem;
-}
+}
diff --git a/css/sec3.css b/css/sec3.css
@@ -1,78 +1,83 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
-:root{
+
+:root {
     --element-color: black;
-    --element1-color:rgba(0, 0, 0, 0.5);
-    --element2-color:rgba(0, 0, 0, 0.8);
+    --element1-color: rgba(0, 0, 0, 0.5);
+    --element2-color: rgba(0, 0, 0, 0.8);
 }
 
 
-.s3boxes{
+.s3boxes {
     /* border: 1px solid black; */
     height: 26rem;
     width: 90rem;
     display: flex;
     margin-left: 6rem;
     margin-bottom: 3rem;
 }
-.mainContainer{
+
+.mainContainer {
     display: flex;
     flex-wrap: wrap;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
-    
+
 }
 
-.flex img:hover{
+.flex img:hover {
     transform: scale(1.1);
 }
-.box1{
-    /* border: 1px solid green; */
+
+.box1 {
     padding-bottom: 2rem;
     height: 27rem;
     margin: 1rem 2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
+    transition: all 0.3s ease-in-out;
 }
-.box1>img{
-    
+
+.box1>img {
     height: 12rem;
     width: 20rem;
+    margin: 20px 0;
     object-fit: fill;
-    /* margin: 0 5vw; */
     border-radius: 1rem;
+    transition: all 0.3s ease-in-out;
 }
 
-.flex{
+.flex {
     display: flex;
     flex-wrap: wrap;
     max-width: 95%;
     margin: 1rem;
 }
 
 
-.flex a{
+.flex a {
     color: black;
     text-decoration: none;
 }
 
-.boxtext{
+.boxtext {
     /* border: 1px solid green; */
     height: 11rem;
     width: 20rem;
     margin-left: 1rem;
 }
-.boxdiv{
+
+.boxdiv {
     margin: 0.4rem 0;
     font-size: 0.8rem;
     color: var(--element1-color);
     line-height: 18px;
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
 }
-.boxtext h1{
+
+.boxtext h1 {
     margin: 0.5rem 0;
     font-family: 'Poppins', sans-serif;
     font-style: normal;
@@ -82,7 +87,8 @@
     width: 15rem;
     font-size: 1rem;
 }
-.boxContent{
+
+.boxContent {
     font-size: 0.7rem;
     font-family: 'Poppins';
     font-style: normal;
@@ -93,34 +99,40 @@
 
 
 }
-.author{
+
+.author {
     display: flex;
     align-items: center;
     margin-top: 1.5rem;
 }
-.boxauthor{
+
+.boxauthor {
     display: flex;
     margin-top: 0.5rem;
 }
-.boxauthor>img{
+
+.boxauthor>img {
     height: 2rem;
     width: 2rem;
     border-radius: 10rem;
-    
+
 }
-.boxauthorsname{
+
+.boxauthorsname {
     margin-left: 0.5rem;
     font-size: 0.8rem;
 }
-.namestyle{
+
+.namestyle {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 500;
     font-size: 0.8rem;
     line-height: 15px;
     color: var(--element-color);
 }
-.datestyle{
+
+.datestyle {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 500;
@@ -129,14 +141,17 @@
     color: var(--element1-color);
 
 }
-@media(max-width: 620px){
-    #signup{
+
+@media(max-width: 620px) {
+    #signup {
         display: none;
     }
-    #loginButton{
+
+    #loginButton {
         display: none;
     }
-    .search{
+
+    .search {
         width: 20rem;
     }
 }