Hover css картинка: Как изменить картинку при наведении на нее курсора или немного о hover-эффектах : WEBCodius

Интересный ховер-эффект для фото на CSS

HTML, CSS

Karina | 24.02.2015

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

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

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

HTML

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

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></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 анимации

Предыдущая запись

Интернет-магазинам: как фотографировать одежду и оформлять страницу товара

Следующая запись

5 красивых и бесплатных HTML-шаблонов сайтов

Hover эффект для изображений на svg • фриланс-работа для специалиста • категория HTML и CSS верстка ≡ Заказчик Александр Ненюков

6 из 6

проект не выполнен

1. публикация

2. прием ставок

3. утверждение условий

4. резервирование

5. выполнение проекта

6. проект не выполнен

Добрый день

Необходимо реализовать hover эффект для изображений на svg.

Задача объединить два svg фильтра/маски/паттерна в одном hover эффекте.

ТЗ — hover эффект на svg

При наведении мышки на картинку должен отработать hover эффект

1) Происходит затемнение всей картинки (.SVG)
2) Происходит проявление иконки «Лупы» (.SVG) по центру картинки

Hover эффект применяется в css через:

img:hover {
  filter: url(#svg_filter_id)
}

Особенности:

— Изначальные размеры картинок нам не известны.  
— Размер и положение лупы, должны регулироваться.
— Цвет и прозрачность затемнения, должны регулироваться.

Частично решение уже есть, но с ошибками, могу скинуть архив то что сделано.

С уважением

Hover эффект для изображений на svg

Качество

Профессионализм

Стоимость

Контактность

Сроки

Профессионализм Тиграна на хорошем уровне, но задача оказалась действительно сложная.

Hover эффект для изображений на svg

Оплата

Постановка задачи

Четкость требований

Контактность

• Ставки 2

дата онлайн рейтинг стоимость время выполнения

1. 1 день1000 UAH

   1 день1000 UAH

   Добрый день!

   Я ознакомилась с задачей, очень заинтересована вашей работой.

   
   Смогу приступить к работе прямо сейчас и все будет сделано в срок.
   Буду рада дальнейшему сотрудничеству с Вами.
   

2. Победившая ставка1 день500 UAH

   Победившая ставка1 день500 UAH

   Здраствуйте ! Опыт работы есть. Магу делать все быстро и еффективно. Зделаю все по ТЗ.
   

1 год назад

112 просмотров

• SVG-анимация

css — Наведите изображение поверх другого изображения

спросил 10 лет, 10 месяцев назад

Изменено 9 лет, 4 месяца назад

Просмотрено 7к раз

Я пытаюсь добавить эффект наведения на некоторые полученные изображения.

 <дел>
  <дел>
      <а href="#">