Merge pull request #110 from SamikshaSankar/issue-52

Update style of cards when hover
Harshal0902 · Jun 29, 2021 · db23339 · db23339
2 parents 9d0db54 + d6a42b5
commit db23339
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/English/home.css b/English/home.css
@@ -114,6 +114,8 @@ p + p {
 .card-wrap:hover .card-info {
   -webkit-transform: translateY(0);
   transform: translateY(0);
+  background-color: black;
+  opacity: 0.8;
 }
 .card-wrap:hover .card-info p {
   opacity: 1;
@@ -161,6 +163,7 @@ p + p {
     inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
   -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  border: 5px solid #0000007a;
 }
 
 .card-bg {
@@ -181,7 +184,7 @@ p + p {
 }
 
 .card-info {
-  padding: 20px;
+  padding: 15px;
   position: absolute;
   bottom: 0;
   -webkit-transform: translateY(40%);
@@ -220,6 +223,10 @@ p + p {
   font-size: 36px;
   font-weight: 700;
   text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
+  background-color: black;
+  border-radius: 5px;
+  width: max-content;
+  padding: 5px;
 }
 
 @media (max-width: 920px) {

diff --git a/Kannada/home.css b/Kannada/home.css
@@ -114,6 +114,8 @@ p + p {
 .card-wrap:hover .card-info {
   -webkit-transform: translateY(0);
   transform: translateY(0);
+   background-color: black;
+   opacity: 0.8;
 }
 .card-wrap:hover .card-info p {
   opacity: 1;
@@ -161,6 +163,7 @@ p + p {
     inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
   -webkit-transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
   transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  border: 5px solid #0000007a;
 }
 
 .card-bg {
@@ -181,7 +184,7 @@ p + p {
 }
 
 .card-info {
-  padding: 20px;
+  padding: 15px;
   position: absolute;
   bottom: 0;
   -webkit-transform: translateY(40%);
@@ -220,6 +223,10 @@ p + p {
   font-size: 36px;
   font-weight: 700;
   text-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px;
+  background-color: black;
+  border-radius: 5px;
+  width: max-content;
+  padding: 5px;
 }
 
 @media (max-width: 920px) {