Displaying text over image

Question

I am trying to display text over image, however, it does't seem to work. Live preview: http://vexato.com Scroll to the Portfolio section and if you hover the first image, it will not show the text. However, after debugging, I noticed that it does show it but it is invisible. How do I fix that?

Code specific to this problem:

 .portfolio { background: #f9f9f9; } .project-item { width: 25%; height: auto; float: left; cursor: pointer; -webkit-filter: brightness(100%); filter: brightness(100%); transition: all 0.3s ease; } .project-info { position: absolute; opacity: 0; } .project-item:hover { -webkit-filter: brightness(70%); filter: brightness(70%); transition: all 0.3s ease; } .project-item:hover .project-info { opacity: 1; } #portfolio-projects { list-style: none; width: 100%; height: auto; overflow: auto; } #portfolio-projects li { position: relative; } 

 <ul id="portfolio-projects"> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> <div class="project-info"> <h5>Project Name</h5> <p>Click here to view.</p> </div> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-1" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> <li> <img src="http://www.engraversnetwork.com/files/placeholder.jpg" alt="" class="project-item mix category-2" /> </li> </ul> 

Answer 1

Problem:

Your current code is a descendant selector and will work only when .project-info is a child of .project-item

Solution:

You need to select the sibling element with + operator.

.project-item:hover + .project-info {
    opacity: 1;
}

Answer 2

将.project-info的不透明度设置为0，将鼠标悬停更改为1。