Position text over image on hover using HTML/CSS

Question

After looking at existing answers, as well as other online tutorials, I still can't figure out how to position text over an image upon hover. Here is an example of what the image would look like when the cursor hovers over the image:

My current code is as follows:

.project {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.project img {
 margin-top: 3em;
 width: 27em;
 height: 25em;
 position: relative;
}

.project img:hover .project p, .project img:hover .project h4 {
 opacity: 1;
}

.project p, .project h4 {
 background: rgba(0,0,0,0.5);
 color: white;
 height: 25em;
 width: 27em;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}

    <div id="project_section">
  <div class="container">
   <div class="row">
    <h2>PROJECTS</h2>
  
    <div class="col-sm-6 project">
     <img src="https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" alt="">
     <h4>Name</h4>
     <p>Put some information here...</p>
    </div>
   
    <div class="col-sm-6 project">
     <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt="">
     <h4>Namep</h4>
     <p>Put some information here...</p>
    </div>
   </div>
  </div>
 </div>

In its current state, the text does not appear at all when hovering over the image. What am I missing?

Answer 1

The key is not to position the element 'on hover' - but to positiion it how you want it, and display it - on hover / either with JavaScript - or opacity and CSS etc.

https://jsfiddle.net/sheriffderek/grkaw0o3/

markup

<div class="parent">
  <div class="child">
    <span>stuff</span>
  </div>
</div>

styles

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.child {
  position: absolute; /* position based on boundery created by nearest relative ancestor */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

Now with hover... (same markup)

https://jsfiddle.net/sheriffderek/ykpacq59/

.parent {
  position: relative; /* define context for absolutly positioned children */
  width: 200px;
  height: 200px;
  background: red;
}

.parent:after {
  content: ''; /* :after has to have a content... but you don't want one */

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,0);

  transition: 1s;
}

.parent:hover:after {
  background: rgba(0,0,0,.5); 
}

.parent:hover .child {
  opacity: 1;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 5; /* only works when position is defined */ 
  /* think of a stack of paper... this element is now 5 higher than the bottom */

  color: white;

  opacity: 0;
  transition: .5s;
}

Answer 2

You can use z-index.

Add position relative to parent and then create divs for image and text with position absolute and set the higher z-index to the top (text) div

Answer 3

You can use the sibling selector to target your text element (i would also wrap the p and h4 into a block level element.

I don't think css can move up nodes on hover.

Is there a CSS parent selector?

.project img:hover ~ p, .project img:hover ~ h4 {
    opacity: 1;
}