Home html How do I make it darken when hovering over an image and...

How do I make it darken when hovering over an image and show the text inside it?

Author

Date

Category


Answer 1, authority 100%

http://jsfiddle.net/8h177njo/

* {
 padding: 0;
 margin: 0;
}
div {
 background: url ('http://moyhutor.net/wp-content/uploads/2012/08/ogurec1.jpg') no-repeat center top;
 height: 300px;
 width: 300px;
 margin: 0 auto;
}
p {
 display: none;
 font-size: 30px;
 font-weight: 700;
 font-family: 'Segoe UI';
 line-height: 300px;
 text-align: center;
 color: #fff;
 animation: fade .5s linear forwards;
}
@keyframes fade {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
div: hover p {
 display: block;
 background: rgba (0, 0, 0, 0.5);
 cursor: pointer;
} 
& lt; div & gt;
 & lt; p & gt; Text & lt; / p & gt;
& lt; / div & gt; 

Answer 2

A couple of ideas for inspiration (codrops):

  1. demo and article
  2. demo and article

  3. Answer 3

    & lt; div class = "list - image" & gt;
      & lt; img src = "12.jpg" class = "image" & gt;
    & lt; / div & gt;
    .list - image {
      background: black;
      opacity: 1;
    }
    .list - image: hover .image {
      opacity: 0.8;
    }
    

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions