Эффект медленного появления картинки

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

Подскажите, как реализовать эффект медленного появления картинки при наведении на текст с ссылкой? Причём картинка должна появляться сзади этого текста.

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

Ответы

▲ 1Принят

fiddle - код взят отсюда

div,
div a {
  display: block;
  position: relative;
  width: 70px;
  height: 70px;
}

div a:before {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 1.0s ease-in-out;
  -moz-transition: opacity 1.0s ease-in-out;
  transition: opacity 1.0s ease-in-out;
  background: url(http://i58.fastpic.ru/big/2013/1105/0c/4c84ffc8c07bd122d28fff13707ddc0c.jpg) no-repeat;
}

div a:hover:before {
  opacity: 1;
}
<div><a href="http://mail.ru">This is link</a>
</div>