Search code examples
javascripthtmlcssoverflowpadding

How to make the article above cover the article below when it gets mor height?

I need some help when hovering over article , i want to cover the article below it instead of pushing the whole next row, i tried to give it some padding and then heigh but i'm getting the same result. I tried also with Jquery to use .hover() function and it gave the same result.

The whole container has a display flex , and every article has a width and height , and when hovering over the article it gets more height. The article without hovering has a 480px and then when hovering 500px

.container {
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.articles_container {
  border-radius: 4px;
  max-width: calc(100vw - 10px);
  margin-bottom: 1px;
  display: flex;
  flex-wrap: wrap;
}
article {
  width: 24%;
  border: 1px solid red;
  margin-left: -1px;
  margin-top: -1px;
  
  height: 480px;
}
img {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
.bottom {
  display: none;
}

article:hover {
  height: 500px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="articles_container">
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>

          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
      </div>
    </div>
   
  </body>
</html>

enter image description here

Solution

  • Edit here is an example using javascript

    const articleItem = document.querySelector('.article_item')
for(let i = 0; i<10;i++){
  articleItem.insertAdjacentHTML("afterend", articleItem.outerHTML);
}
const articles = document.querySelectorAll('article')

articles.forEach(a=>{
  a.addEventListener('mouseover',handleHover)
  a.addEventListener('mouseout',handleHoverEnd)
})

function handleHover(e){
  const width = e.currentTarget.clientWidth 
  const top = e.currentTarget.offsetTop + 1 //>>adjust for margins set in css
  const left = e.currentTarget.offsetLeft + 1 //>>adjust for margins set in css
  e.currentTarget.classList.add('active')
  e.currentTarget.style.cssText = `top: ${top}px; left: ${left}px; width: ${width}px`
}
function handleHoverEnd(e){
  e.currentTarget.classList.remove('active')
}
    .container {
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.articles_container {
  border-radius: 4px;
  max-width: calc(100vw - 10px);
  margin-bottom: 1px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.article_item{
width: 24%;
}
article {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin-left: -1px;
  margin-top: -1px;
  height: 180px;
  background-color: white;
  overflow: hidden;
}
img {
  max-width: 100%;
}
.bottom {
  display: none;
  
}

.active {
  position: absolute;
  height: 300px;
  z-index: 3;
}
    <body>
    <div class="container">
      <div class="articles_container">
        <div class="article_item">
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        </div>
      </div>
    </div>
   
  </body>