Nikita Nikita - 1 year ago 80
CSS Question

HTML & CSS: text over image

I am trying to display a text over an image. The idea is to have a

<p>
with
height: 0px; overflow: hidden;
when the user hover it,
height: auto
.

When hovering the item, all the rows below moves because the new size of the p, and I want the item to stay in place, with the p over the item below it. This is the CSS:

Answer Source

Add this to your code

.article{
          width: 30%;
          height: auto;
          margin: 0;
          position:relative;/* Added */
 } 

 p{
        background-color: lightgray;
        height: 0px;
        overflow: hidden; 
        position:absolute; /* Added */
        left:0; /* Added */
        z-index:10; /* Added */
        }

Fiddle :https://jsfiddle.net/e5t0k3L6/

.Wrapper {
  margin: 0 auto;
  max-width: 937px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

img {
  background-color: gray;
  min-width: 100%;
  min-height: 200px;
  filter: grayscale(100%);
  margin-bottom: 10px;
  z-index: 1;
}

h3 {
  font-weight: normal;
  margin: 0;
}

h4 {
  margin: 0;
  font-weight: normal;
}

.article {
  width: 30%;
  height: auto;
  margin: 0;
  position: relative;
  /* Added */
}

p {
  background-color: lightgray;
  height: 0px;
  overflow: hidden;
  position: absolute;
  /* Added */
  left: 0;
  /* Added */
  z-index: 10;
  /* Added */
}

.article:hover p {
  height: auto;
}
<section class="Wrapper">
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
  <article class="article">
    <img src="" alt="name_item">
    <h3>name_item</h3>
    <h4>subtitle_item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </article>
</section>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download