HTML & CSS: text over image

Question

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:

Your overlay text needs to be absolutely positioned relative to the image container. — Nathaniel Flick, Oct 03 '17 at 07:16
Possible duplicate of [How to position text over an image in css](https://stackoverflow.com/questions/8708945/how-to-position-text-over-an-image-in-css) — Hugoar, Oct 03 '17 at 07:16

score 0 · Accepted Answer · edited Oct 03 '17 at 07:21

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>

Thank you very much @Shahil. I was missing the position: relative in .article, as well as the z-index… — , Oct 03 '17 at 07:26

score 0 · Answer 2 · answered Oct 03 '17 at 07:31

0

Just need to replace your p{} with the following css

p{
    position:absolute;
    display:inline-block;
    background-color: lightgray;
    height: 0px;
    overflow: hidden;
    margin-top:-20px;
    z-index:9;
    width:30%;
 }

answered Oct 03 '17 at 07:31

Teng Wei Hao

1

HTML & CSS: text over image

2 Answers2