styling overlay

HanPutra · May 16, 2024 · e0b7703 · e0b7703
1 parent eead839
commit e0b7703
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 14 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -53,7 +53,7 @@ body {
   justify-content: center;
   align-items: center;
   color: var(--light);
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease;
   z-index: 1;
 }
 
@@ -158,7 +158,7 @@ h1 {
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.75);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
@@ -178,7 +178,7 @@ h1 {
   color: var(--light);
   font-size: 1.2rem;
   opacity: 0;
-  transition: opacity 0.3s ease-in-out;
+  transition: opacity 0.3s ease;
 }
 
 .gallery-item:hover .image-text {
@@ -194,22 +194,57 @@ h1 {
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.75);
 }
 
 .overlay .overlay-content {
   position: absolute;
-  top: 10%;
-  left: 20%;
-  right: 20%;
-  bottom: 10%;
+  top: 5%;
+  left: 25%;
+  right: 25%;
+  bottom: 5%;
   border-radius: 2rem;
-  background-color: var(--danger);
+  background-color: var(--light);
+  overflow: hidden;
 }
 
 .overlay-content .overlay-image {
   width: 100%;
-  background-color: var(--dark);
+}
+.overlay-content .overlay-text {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  font-size: 1.2rem;
+  text-align: center;
+  /* background-color: var(--success); */
+}
+.overlay-text .overlay-title {
+  position: absolute;
+  top: -3rem;
+  font-size: 2rem;
+  height: 3rem;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--light);
+  border-top-right-radius: 2rem;
+  border-top-left-radius: 2rem;
+}
+
+.overlay-text .overlay-desc {
+  width: 100%;
+  /* background-color: var(--success); */
+  text-align: left;
+  text-indent: 1.2rem;
+  padding: 0.6rem;
+  display: inline-block;
+  white-space: wrap; /* Prevents text from wrapping to a new line */
+  overflow: hidden; /* Hides the overflow */
+  text-overflow: ellipsis; /* Adds ellipsis at the end */
 }
 
 .close-button,
@@ -218,20 +253,48 @@ h1 {
   position: absolute;
   font-size: 4rem;
   cursor: pointer;
+  background-color: var(--light);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4rem;
+  height: 4rem;
+  transition: 0.3s ease;
 }
 
 .overlay .close-button {
-  top: 8%;
-  right: 21%;
+  top: 5%;
+  right: 25%;
+  border-bottom-left-radius: 2rem;
+  border-top-right-radius: 2rem;
+}
+.close-button:hover {
+  border-bottom-right-radius: 2rem;
+  border-top-left-radius: 2rem;
+  transform: translate(-0.5rem, 0.5rem);
 }
 
 .overlay .left-arrow {
   top: calc(50% - 4rem);
-  left: calc(20% - 3rem);
+  left: calc(25% - 4rem);
+  border-top-left-radius: 2rem;
+  border-bottom-left-radius: 2rem;
+}
+.left-arrow:hover {
+  border-top-right-radius: 2rem;
+  border-bottom-right-radius: 2rem;
+  transform: translate(-0.5rem);
 }
 
 .overlay .right-arrow {
   top: calc(50% - 4rem);
-  right: calc(20% - 3rem);
+  right: calc(25% - 4rem);
+  border-top-right-radius: 2rem;
+  border-bottom-right-radius: 2rem;
+}
+.right-arrow:hover {
+  border-top-left-radius: 2rem;
+  border-bottom-left-radius: 2rem;
+  transform: translate(0.5rem);
 }
 /* end of overlay */
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -89,6 +89,19 @@ function showOverlay(index) {
   overlayDesc.innerText = img.getAttribute("data-description");
   overlay.style.display = "flex";
   currentIndex = index;
+
+  // calc max-content width of overlay-title
+  overlayTitle.style.width = "auto";
+  const maxContentWidth = overlayTitle.scrollWidth;
+  overlayTitle.style.width = `calc(${maxContentWidth}px + 2rem)`;
+
+  // limit max character on overlay-desc
+  const maxCharacters = 400;
+  const originalText = overlayDesc.innerText;
+  if (originalText.length > maxCharacters) {
+    const truncatedText = originalText.substring(0, maxCharacters) + "...";
+    overlayDesc.innerText = truncatedText;
+  }
 }
 
 function hideOverlay() {