From 085129162caf8dc8b7a16cd169209c285c5318f9 Mon Sep 17 00:00:00 2001
From: Femi Oladeji <f.oladeji@temper.works>
Date: Fri, 21 Aug 2020 01:39:29 +0200
Subject: [PATCH] fix fade effect doc examples css

---
 docs/app.css                                 |  9 ++++-
 docs/views/codeStrings.js                    | 39 +++++++++++++++-----
 docs/views/pages/Examples/CustomIndicator.js |  4 +-
 docs/views/pages/Examples/Fade.js            | 18 ++++++---
 docs/views/pages/Examples/PauseHover.js      | 12 ++++--
 src/css/styles.css                           |  2 +-
 6 files changed, 62 insertions(+), 22 deletions(-)

diff --git a/docs/app.css b/docs/app.css
index 8df2aef..14dd2c8 100644
--- 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
index c6be800..39b7168 100644
--- 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
index 16d59d9..2c8a839 100644
--- 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
index 36ed915..5ae220e 100644
--- 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
index 49cc036..68202d2 100644
--- 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
index dd6be2b..b23593a 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -152,4 +152,4 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-}
\ No newline at end of file
+}