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

Рейтинг: 7Ответов: 1Опубликовано: 06.10.2014

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

css html
Источник: Stack Overflow на русском

Ответы

▲ 7

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;
}
<div>
  <p>Text</p>
</div>

или так

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;
}
<div>
  <p>Text</p>
</div>