fix fade effect doc examples css

femioladeji · Aug 20, 2020 · 0851291 · 0851291
1 parent 5bd3a47
commit 0851291
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 22 deletions.
diff --git a/docs/app.css b/docs/app.css
@@ -34,12 +34,19 @@ h3 {
 
 .each-fade {
   display: flex;
+  width: 100%;
 }
 
-.each-fade img {
+.each-fade > div {
   width: 75%;
 }
 
+.each-fade > div img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .each-fade p {
   width: 25%;
   font-size: 1em;

diff --git a/docs/views/codeStrings.js b/docs/views/codeStrings.js
@@ -112,16 +112,22 @@ const FadeExample = () => {
       <div className="slide-container">
         <Fade>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
-            <h2>First Slide</h2>
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
-            <img src={fadeImages[1]} />
+            <p>Second Slide</p>
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
-            <h2>Third Slide</h2>
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
+            <p>Third Slide</p>
           </div>
         </Fade>
       </div>
@@ -135,12 +141,19 @@ export default FadeExample;
 export const fadeEffectCSS = `
 .each-fade {
   display: flex;
+  width: 100%;
 }
 
-.each-fade  img {
+.each-fade > div {
   width: 75%;
 }
 
+.each-fade > div img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .each-fade p {
   width: 25%;
   font-size: 1em;
@@ -395,15 +408,21 @@ const PauseHoverExample = () => {
       <div className="slide-container">
         <Slide {...fadeProperties}>
           <div className="each-fade">
-            <img src={images[0]} />
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
             <p>First Slide</p>
           </div>
           <div className="each-fade">
             <p>Second Slide</p>
-            <img src={images[1]} />
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={images[2]} />
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
             <p>Third Slide</p>
           </div>
         </Slide>

diff --git a/docs/views/pages/Examples/CustomIndicator.js b/docs/views/pages/Examples/CustomIndicator.js
@@ -37,7 +37,9 @@ const CustomIndicatorExample = () => {
       <div>
         <Zoom {...zoomOutProperties}>
           {images.map((each, index) => (
-            <img key={index} style={{ width: '100%' }} src={each} />
+            <div key={index} style={{width: "100%"}}>
+              <img style={{ objectFit: "cover", width: "100%" }} src={each} />
+            </div>
           ))}
         </Zoom>
       </div>

diff --git a/docs/views/pages/Examples/Fade.js b/docs/views/pages/Examples/Fade.js
@@ -29,16 +29,22 @@ const FadeExample = () => {
       <div>
         <Fade {...fadeProperties}>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
-            <h2>First Slide</h2>
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
+            <p>First Slide</p>
           </div>
           <div className="each-fade">
-            <h2>Second Slide</h2>
-            <img src={fadeImages[1]} />
+            <p>Second Slide</p>
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
-            <h2>Third Slide</h2>
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
+            <p>Third Slide</p>
           </div>
         </Fade>
       </div>

diff --git a/docs/views/pages/Examples/PauseHover.js b/docs/views/pages/Examples/PauseHover.js
@@ -27,15 +27,21 @@ const PauseOnHoverExample = () => {
       <div>
         <Slide {...fadeProperties}>
           <div className="each-fade">
-            <img src={fadeImages[0]} />
+            <div>
+              <img src={fadeImages[0]} />
+            </div>
             <p>First Slide</p>
           </div>
           <div className="each-fade">
             <p>Second Slide</p>
-            <img src={fadeImages[1]} />
+            <div>
+              <img src={fadeImages[1]} />
+            </div>
           </div>
           <div className="each-fade">
-            <img src={fadeImages[2]} />
+            <div>
+              <img src={fadeImages[2]} />
+            </div>
             <p>Third Slide</p>
           </div>
         </Slide>

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -152,4 +152,4 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-}
+}