Как сделать, чтобы при hover на картинку она затемнялась и появлялся текст внутри нее?

#html #css

Весь Интернет перерыл, не нашел ничего толкового. Смысл прост: при наведении мышью
на картинку она должна затемняться чуть-чуть. И внутри блока-картинки появлялся текст.
Прошу помочь.    

Ответы

Ответ 1

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;
}

  
Text





или так

http://jsfiddle.net/a0h9uzrw/



* {
  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 {
  opacity: 0;
  font-size: 30px;
  font-weight: 700;
  font-family: 'Segoe UI';
  line-height: 300px;
  text-align: center;
  color: #fff;
  transition: .5s ease;
}

div:hover p {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

  
Text



Ответ 2

Пара идей для вдохновения (codrops):

демо и статья
демо и статья