Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 09.08.2020

Наверх

Наверх

Нет комментариев

Украшаем сайт: hover-эффект для фото с помощью CSS

Украшаем сайт: hover-эффект для фото с помощью CSS

Время от времени нам необходимы свежие идеи и подсказки, как оригинально оформить сайт. Именно сегодняшний урок может вдохновить вас на необычные решения. На демо-странице показан интересный ховер-эффект для фото, который реализован с помощью CSS: при наведении курсора мыши на область фото одна картинка заменяется другой. Если двигать курсором из стороны в сторону, можно наблюдать забавный эффект «жалюзи».

Подобный вариант применения CSS переходов хорошо подойдет в качестве украшения для шапки сайта или в любом другом случае, когда вам требуется привлечь внимание пользователя. Все зависит от вашей фантазии!

Демо Загрузить архив RAR (999 kB)

HTML

Наша разметка HTML состоит из множественных блоков <div>:

<div class="day">
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
  <div class="night"></div>
</div>

CSS

В таблице стилей описаны правила CSS для элементов с классом .day и элементов с классом .night. К этим элементам применены фоновые изображения. Итак, 20 блоков <div> с классом .night и размерами 50×555 пикселей вместе образуют одну картинку, которая видна при загрузке страницы. При наведении курсора на один из этих блоков создается ощущение, что изображение меняется на другое. На самом же деле фон блока .night становится полностью прозрачным (opacity: 0), благодаря чему мы видим фон блока .day. Если курсор убрать, изображение плавно станет непрозрачным снова.

.day {
  margin: 0 auto;
  white-space: nowrap;
  width: 1000px;
  height: 555px;
  overflow: hidden;
  background: url('images/eiffel-tower-day-css.jpg') no-repeat fixed;
  background-position: top;
  font-size: 0;
}

.night {
  width: 50px;
  height: 555px;
  display: inline-block;
  -webkit-transition: all 2s ease-in-out;
          transition: all 2s ease-in-out;
  background: url('images/eiffel-tower-night-css.jpg') no-repeat fixed;
  background-position: top;
}

.night:hover {
  -webkit-transition: all 0s linear;
          transition: all 0s linear;
  opacity: 0;
}

Для подробного ознакомления и экспериментов с кодом вы можете загрузить архив с файлами (ссылка в начале статьи). Возможно, вам удастся реализовать эту идею еще более интересным способом.
Желаем творческих успехов!

Читайте также: 9 простых примеров CSS3 анимации

Оставить комментарий