From da652c91aad103811ba83f8034fc306ad31f5584 Mon Sep 17 00:00:00 2001
From: Paul Yao Kudaya <kudayapaul@gmail.com>
Date: Sun, 22 Oct 2023 06:22:03 +0000
Subject: [PATCH] fix: caption hiding behind image issue (#1283)

* fix: caption hiding behind image issue

* fix: inline styling changed to class

* fix: div cannot be a child of a <p> tag
---
 src/components/ReadMore/index.css | 7 +++++++
 src/components/ReadMore/index.jsx | 6 ++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ReadMore/index.css b/src/components/ReadMore/index.css
index 31003dae0..6e52c26c1 100644
--- a/src/components/ReadMore/index.css
+++ b/src/components/ReadMore/index.css
@@ -7,3 +7,10 @@
 .read__more__less:hover {
   color: rgb(6, 33, 115);
 }
+
+.caption_container {
+  z-Index:1;
+background-color: white;
+opacity: 0.7;
+
+}
diff --git a/src/components/ReadMore/index.jsx b/src/components/ReadMore/index.jsx
index 428898ffd..e872a5e4c 100644
--- a/src/components/ReadMore/index.jsx
+++ b/src/components/ReadMore/index.jsx
@@ -1,3 +1,5 @@
+import "./index.css";
+
 import React, { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -18,7 +20,7 @@ const ReadMore = ({ children, postId, picCap = false, readMore = true }) => {
     : text;
 
   return (
-    <>
+    <span className="caption_container">
       <Caption caption={captionText} />
       {text.length >= 40 && (
         <span
@@ -38,7 +40,7 @@ const ReadMore = ({ children, postId, picCap = false, readMore = true }) => {
           {isReadMore ? " ...read more" : " ...show less"}
         </span>
       )}
-    </>
+    </span>
   );
 };