Click Button When Not Interacting

Admin 1
Viewed 91

I have the following code:

// Projects Script

document.addEventListener("DOMContentLoaded", function(event) {
  // Select all the read more buttons and hidden contents
  const readMoreButtons = document.querySelectorAll(".read-more");
  const hiddenContents = document.querySelectorAll(".hidden");
  // Now loop over the read more buttons 
  readMoreButtons.forEach((readMoreButton, index) => {
    // Add onclick event listeners to all of them
    readMoreButton.addEventListener("click", () => {
      // Change content of read more button to read less based on the textContent
      if (readMoreButton.textContent === "Read More") {
        readMoreButton.textContent = "Read Less";
      } else {
        readMoreButton.textContent = "Read More";
      }
      // Toggle class based on index
      hiddenContents[index].classList.toggle("hidden");
      readMoreButton.closest(".snip1311").classList.toggle("reading");
    })
  })
})
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: white;
}

figure.snip1311.reading {
  overflow-y: auto;
}

figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  border: 3px solid #555;
}

figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
  height: 258px;
}

figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}

figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}

figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}

figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}

figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}

figure.snip1311 .read-more1 {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}

figure.snip1311 .read-more1:hover {
  background-color: #ffffff;
  color: #000000;
}

figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}

figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.hidden {
  display: none;
}

.read-more {
  cursor: pointer;
}


/* ScrollBar */

 ::-webkit-scrollbar {
  width: 5px;
  height: auto;
}


/* Track */

 ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px transparent;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
  border-radius: 10px;
}
<div class="project-container">
  <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
    <figcaption>
      <h3>Sample Text</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
      <div class="read-more">Read More</div>
      <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur
        urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>

    </figcaption>
  </figure>

When you run the above code, click the read more button and then hover off of the whole card, the read less button does not get clicked.

Expected Output

When the user hovers over the card, clicks the read more button, and then just hovers off of the whole card, the read less button should get clicked. The way to confirm if the read less button got clicked would be when the user hovers off of the whole card after clicking the read more button, the scrollbar would not appear. Right now, it appears when you click the read more button and then hover off the card, and this is because the read less button is not clicked.

I want the read less button to be clicked when the user hovers off of the whole card or stops interacting with the card. Any suggestions?

css html jquery javascript
2 Answers

Your need to rewrite so you define the hover/mouseover state with js, then toggle back the read more on mouseleave.

Example (you may want to optimise)

// Projects Script

document.addEventListener("DOMContentLoaded", function(event) {

  document.querySelectorAll("figure.snip1311").forEach((el) => {

    // Select all the read more buttons and hidden contents
    const readMoreButtons = el.querySelectorAll(".read-more");
    const hiddenContents = el.querySelectorAll(".hidden");
    // Now loop over the read more buttons 
    readMoreButtons.forEach((readMoreButton, index) => {
      // Add onclick event listeners to all of them
      readMoreButton.addEventListener("click", () => {
        // Change content of read more button to read less based on the textContent
        if (readMoreButton.textContent === "Read More") {
          readMoreButton.textContent = "Read Less";
        } else {
          readMoreButton.textContent = "Read More";
        }

        readMoreButton.closest(".snip1311").classList.toggle("reading");
        hiddenContents[index].classList.toggle("hidden");
      })
    })

    el.addEventListener('mouseenter', e => {
      e.target.classList.add('hover')
    })

    el.addEventListener('mouseleave', e => {
      e.target.classList.remove('hover')
      setTimeout(() => {
        readMoreButtons.forEach((readMoreButton, index) => {
          readMoreButton.textContent = "Read More";
          readMoreButton.closest(".snip1311").classList.remove("reading");
          hiddenContents[index].classList.add("hidden");
        })
      }, 600)
    })
  })
})
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: white;
}

figure.snip1311.reading {
  overflow-y: auto;
}

figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-x: hidden;
  overflow-y: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
  border: 3px solid #555;
}

figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
  height: 258px;
}

figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}

figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}

figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}

figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}

figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}

figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}

figure.snip1311 .read-more1 {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}

figure.snip1311 .read-more1:hover {
  background-color: #ffffff;
  color: #000000;
}

figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}

figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}

.hidden {
  display: none;
}

.read-more {
  cursor: pointer;
}


/* ScrollBar */

 ::-webkit-scrollbar {
  width: 5px;
  height: auto;
}


/* Track */

 ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px transparent;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
  border-radius: 10px;
}
<div class="project-container">
  <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
    <figcaption>
      <h3>Sample Text</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
      <div class="read-more">Read More</div>
      <p class="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula porttitor ultrices. Curabitur
        urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus. Etiam in erat magna.</p>

    </figcaption>
  </figure>

user_6618720

This solution is based on calling the class click event read-more inside the mouse event listener mouseleave.

Just add this logic to your javascript code:

document.querySelector(".snip1311").addEventListener("mouseleave", (event) => {
    if (event.target.classList.contains("reading")) {
        readMoreButtons[0].click();
    } else {}
});

This logic checks for the presence of class reading in tag figure. If this class exists, then the click event trigger is fired. According to your code, class reading means Read Less status.

document.addEventListener("DOMContentLoaded", function (event) {
    const readMoreButtons = document.querySelectorAll(".read-more");
    const hiddenContents = document.querySelectorAll(".hidden");
    readMoreButtons.forEach((readMoreButton, index) => {
        readMoreButton.addEventListener("click", () => {
            if (readMoreButton.textContent === "Read More") {
                readMoreButton.textContent = "Read Less";
            } else {
                readMoreButton.textContent = "Read More";
            }
            hiddenContents[index].classList.toggle("hidden");
            readMoreButton.closest(".snip1311").classList.toggle("reading");
        });
    });
    document.querySelector(".snip1311").addEventListener("mouseleave", (event) => {
        if (event.target.classList.contains("reading")) {
            readMoreButtons[0].click();
        } else {
        }
    });
});
@import url(https://fonts.googleapis.com/css?family=Raleway:400, 500, 800);
.project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
}

figure.snip1311.reading {
    overflow-y: auto;
}

figure.snip1311 {
    font-family: "Raleway", Arial, sans-serif;
    position: relative;
    float: left;
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 10px 1%;
    min-width: 230px;
    max-width: 360px;
    max-height: 256px;
    width: 500rem;
    color: #ffffff;
    text-align: left;
    background-color: #07090c;
    font-size: 16px;
    -webkit-perspective: 50em;
    perspective: 50em;
    border: 3px solid #555;
}

figure.snip1311 * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

figure.snip1311 img {
    max-width: 110%;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
    backface-visibility: hidden;
    height: 258px;
}

figure.snip1311 figcaption {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: rotateX(90deg) translate(0%, -50%);
    transform: rotateX(90deg) translate(0%, -50%);
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    z-index: 1;
    opacity: 0;
    padding: 0 30px;
}

figure.snip1311 h3,
figure.snip1311 p {
    line-height: 1.5em;
}

figure.snip1311 h3 {
    margin: 0;
    font-weight: 800;
    text-transform: uppercase;
}

figure.snip1311 p {
    font-size: 0.8em;
    font-weight: 500;
    margin: 0 0 15px;
}

figure.snip1311 .read-more {
    border: 2px solid #ffffff;
    padding: 0.5em 1em;
    font-size: 0.8em;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
}

figure.snip1311 .read-more:hover {
    background-color: #ffffff;
    color: #000000;
}

figure.snip1311 .read-more1 {
    border: 2px solid #ffffff;
    padding: 0.5em 1em;
    font-size: 0.8em;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
}

figure.snip1311 .read-more1:hover {
    background-color: #ffffff;
    color: #000000;
}

figure.snip1311:hover img,
figure.snip1311.hover img {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    opacity: 0;
    -webkit-transition-delay: 0;
    transition-delay: 0;
}

figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
    -webkit-transform: rotateX(0deg) translate(0, -50%);
    transform: rotateX(0deg) translate(0, -50%);
    opacity: 1;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
}

.hidden {
    display: none;
}

.read-more {
    cursor: pointer;
}

/* ScrollBar */

::-webkit-scrollbar {
    width: 5px;
    height: auto;
}

/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 3px transparent;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwcNCA0NCA0HBwgIBw0HBwcHBw8ICQcNFREWFhUREx8YHSggGBoxJxMVITEhJSkrLi46Fx8zODMsNygtLisBCgoKDQ0NDw0NDisZFRkrKy0rKysrLTcrKystLTctLSsrKysrKysrKysrLS0rKysrNy0rLSstLSsrKysrKysrK//AABEIALwBDAMBIgACEQEDEQH/xAAaAAEBAQEBAQEAAAAAAAAAAAACAQMABwYF/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/8QAGQEBAQEBAQEAAAAAAAAAAAAAAgABAwYF/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD8HLsll2X23xNDLsllMpujlMnlMpuhlMnlEpuhlEnlEpugkUtMolFKzyiTSiWlrNKJNKZRSs0ilokUopQaJJKNFKCRSaUS0pWaRS0SKUUCLNi0cBik0i2lKCRSaRaOAxSbFooDGbTKOPs8pk8uy5vO6GUyeUym6GUy0ymU3WeXZPI5a3QyiTymUWhkW0SKU2UEok0ilFKDRJpG0pQSLaJFopWbFLRIpRygxSaRbSlBilokWilZsW0SLRygxZsUooDFmxbTjNozYtHAYzY0Ur7XLsnlMubzmhl2TymU3QymTymU3QymTymU3WaUSeUSi0IpNKWlKCRy0SKUUBIpNKJRSs0ok0i2lKCRZpFKKUEik0i0coRZtGijNi2iRS05WbGbFo4DFJsW0oCRZsWjgMUmxo4+4y7J5TLm81oZTJ5TKWhlMmlEotDKJPKJTZWaUSeUSilBIpNKJRSs0ok0jaUoJFtEilHGaUSaRSilBizYpacBik2LRQGLNItHAYs2LaUBizYtHGbFm0aOM2LNi2nAYzY0cfd5TJ5dlyeX0Mpk0plrdDIpaZRKLWeUSeUSi1nlEmlEopWaUSaRSilBIpNo0UrNItokW04zSjNi0UBg2jFo4DBtGLaUZsWbFo4DFJsWjgMWbFtOM2LNi0cBizYtpQGM2NHH32UyeXZcnltZ5TLRKJRazSmTSiU3WaUSaUbSlZsUtEilFKDFJpRKOVmkUtGCUUBIpaMGjgJFm0bTjNIs2LRQGLNItpwGDaMGjgMWbFo4DFmxbTjNizYtHAYs2LRQGE2Npx6FlMnlMuTymhlMnlEotZ5RJpRKbKzSKWiRSjlDIpNi2lKDFJpFo4CRSbFooDFmxaOM2LaMG04DFmxaOAxZsWjgMG0YNpwGLNg0cBizYtpQGLNi06RmxZsWigMWbG049EyiWmUS4vJazSiTSiUUrNIpaMW0pQSKTYtFKCRZpFo4CRZsW04zSLNi0cBizYtHAYNowaOAxZxbTgMWTFo4DFmxbTgMGbFo4DFkxaOAxZsW04DGTFo4DGbBtKPScok0olxeQ1mlEmkUopQSLNi0coJFmxbTgJBLRg0UBik2LRxmxZsW10gMWbBo4DFmxaOM2jJi2nAYs2DRwGLNi2nAYM2LRwGLJi0cFgzYtpwGDNi0cBjNjRx6WkUtEilxeOlBizYtpSgxZsWjjNizYtpwGDNi0cBg2jBo4DFmwbXSAxZsWjgMGbFo4DFkxbTgMWbBo4LBmxbTgMGbFo4DBmxaOCwZsG04LBmwadILGTGij09ik2LcXjYzYs2LRwGLJi2nAYM2LRwGLJi2nAYs2DTpAYs2DacBizYNHBYM2DTpBYM2DacFiyYtHAYsmLRwWDNg2nBYM2DRwWDNi2nAYsmLRwIsmLRx6iwZsG4vGQWDNg0cFgzYNrpBYM2DRwWDNg2nBYM2DTpBYM2DacFgzYNHBYM2DRwWDNg2nBYsmLTpBYM2DRwWDNg2nBYM2DRwWLJi2nAYsmLRwGLJi0cf/9k=);
    border-radius: 10px;
}
<div class="project-container">
    <figure class="snip1311">
        <img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94" />
        <figcaption>
            <h3>Sample Text</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu.</p>
            <div class="read-more">Read More</div>
            <p class="hidden">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam interdum mi et eros finibus, eget efficitur dolor accumsan. Proin ut varius ligula. Duis et nulla eu metus congue auctor at vitae arcu. Quisque vehicula
                porttitor ultrices. Curabitur urna velit, auctor eget dignissim nec, commodo congue metus. Pellentesque leo ante, ullamcorper sit amet ornare eleifend, fringilla a ligula. Phasellus congue magna vitae purus pretium dapibus.
                Etiam in erat magna.
            </p>
        </figcaption>
    </figure>
</div>

user_135734440
Related