corporate images hover effect

LitusProject · Jan 15, 2024 · 856b578 · 856b578
1 parent 21fc939
commit 856b578
Showing 1 changed file with 19 additions and 2 deletions.
diff --git a/module/CommonBundle/Resources/assets/site/less/vtk-br.less b/module/CommonBundle/Resources/assets/site/less/vtk-br.less
@@ -497,8 +497,8 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
+  grid-column-gap: 2px;
+  grid-row-gap: 2px;
   overflow: hidden;
   height: 500px;
 }
@@ -507,6 +507,23 @@
   background-position: center;
   background-size: cover;
   cursor: pointer;
+  position: relative;
+  overflow: hidden; /* prevent transition overflow */
+}
+
+.lightboxImage::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.3s ease;
+}
+
+.lightboxImage:hover::before {
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .lightbox1 {