Современный hover эффект для изображений

Привет, друзья. Всё больше и больше набирают популярность при веб - дизайне различные hover эффекты для картинок на страницах сайта. Как же я давно не писала про оформление изображений. Если вы что - то пропустили, все эффекты для изображений можно посмотреть под ярлыком картинки. Сегодня предложу красивый, назову его полупрозрачный эффект, когда при наведении курсора на картинку появиться описание и красиво оформленный тон. 

эффекты для картинок


Сама фишка ни чем особым не отличается от других подобных эффектов. Всё создаётся так же с помощью CSS и не несёт нагрузки на блог в целом. Сейчас мы сделаем сразу несколько слоёв, но результат будет достаточно интересный. Самое главное использовать будем всего 2 основных цвета. Реализация достаточно простая, но как современно, стильно и красиво это выглядит.

Так же добавим некоторый эффект анимации к картинке. 

Чтобы долго  не говорить, сразу предлагаю посмотреть результат. Скопируйте код, приведённый ниже и установите его в редакторе для просмотра результата.

<figure class="snip">
  <img src="http://veneratour.com/pics/resorts/2011/03/02/8296_1299055722_big.jpg" alt="sample110" />
  <figcaption>
    <h3>Индонезия</h3>
    <p>Красивый остров Бали в океане</p>
  </figcaption>
  <a href="#"></a>
</figure>

<figure class="snip"><img src="http://tourweek.ru/upload/iblock/858/544133614_3e2445332a_o.jpg" alt="sample59" />
  <figcaption>
    <h3>Таиланд</h3>
    <p>Уникальный остров Пхи - Пхи в Таиланде </p>
  </figcaption>
  <a href="#"></a>
</figure>


<style>
.snip {
  background-color: #fff;
  color: #ffffff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px 5px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: right;
  width: 100%;
}

.snip *,
.snip *:before,
.snip *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip:before,
.snip:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip:before {
  -webkit-transform: skew(30deg) translateX(80%);
  transform: skew(30deg) translateX(80%);
}

.snip:after {
  -webkit-transform: skew(-30deg) translateX(70%);
  transform: skew(-30deg) translateX(70%);
}

.snip figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 20px 20px 20px 40%;
}

.snip figcaption:before,
.snip figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip figcaption:before {
  -webkit-transform: skew(30deg) translateX(100%);
  transform: skew(30deg) translateX(100%);
}

.snip figcaption:after {
  -webkit-transform: skew(-30deg) translateX(90%);
  transform: skew(-30deg) translateX(90%);
}

.snip h2,
.snip p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip h2 {
  font-family: 'Teko', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip p {
  font-size: 0.9em;
}

.snip a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip:hover h2,
.snip.hover h2,
.snip:hover p,
.snip.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
}

.snip:hover:before,
.snip.hover:before {
  -webkit-transform: skew(30deg) translateX(30%);
  transform: skew(30deg) translateX(30%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip:hover:after,
.snip.hover:after {
  -webkit-transform: skew(-30deg) translateX(20%);
  transform: skew(-30deg) translateX(20%);
}

.snip:hover figcaption:before,
.snip.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(50%);
  transform: skew(30deg) translateX(50%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip:hover figcaption:after,
.snip.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(40%);
  transform: skew(-30deg) translateX(40%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
</style>

В строках, отмеченных зелёным цветом, вставляйте адреса ваших изображений. Розовым цветом я выделила, заголовок на картинке и описание.
Вместо решёток укажите, по необходимости ссылку, куда будет осуществляться переход при клике на картинку, в этом участке кода <a href="#"></a>.
Ну сам цвет такого эффекта в двух местах можно изменить на свой, соответствующий основе вашего дизайна. Воспользуйтесь таблицей цветов. 

Сейчас, как всегда, готовый код устанавливается в редакторе сообщений в нужном месте в режиме HTML.

Такой вот необычный и стильный hover эффект для изображений может украсить страницы ваших сообщений. 

Всем добра и солнечных денёчков. До встречи.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

19 комментариев:

  1. Попробую. Спасибо, Вика. Интересно, когда за картинкой "прячется" информация 🌠

    ОтветитьУдалить
    Ответы
    1. Попробуй, Люба. Код хоть и большой но не тяжёлый. Полупрозрачность тоже задаёт стиль.

      Удалить
  2. КРАСИВО смотрится! Спасибо, Вика!

    ОтветитьУдалить
  3. Виктория,здравствуйте! Подскажите,пожалуйста,где лучше размещать картинки для своего блога. Сейчас перерыла столько инфы про фотохостинги и не один не вызвал доверия.Посоветуйте пожалуйста.

    ОтветитьУдалить
  4. Серафима Корф, я делаю так. Картинку сохраняю на компьютере. атем загружаю её в блог. Она сохраняется на сервере гугл даже в черновике. Многие создают отдельный блог для хранения картинок. Оттуда потом и адрес её берём. После публикации она тоже сохраняется на сервере Гугл. Если перейдёте в режим HTML то можно видеть адрес картинки с примерно такого вида src="https://2.bp.blogspot.com/-и т. д.
    посмотрите адреса ваших опубликованных картинок. После того как написано сообщение и опубликовано, с компьютера я её удаляю, если больше не нужна будет. И всё. Можете прочитать ещё пост http://www.shpargalochki.ru/2015/05/kak-rabotat-s-izobrazhenijami-bloga.html Ещё, как вариант, можно создать Гугл - сайт и там хранить. Здесь лучше вам статью прочитать эту http://www.shpargalochki.ru/2014/08/google-sajt-kak-hranilishhe-fajlov.html А так если не для блога, так и не знаю что. Раньше радикалом пользовалось.

    ОтветитьУдалить
    Ответы
    1. Вика,благодарю Вас за пояснение! Буду разбираться.

      Удалить
  5. Вика, привет. С праздником! Не подскажешь, вроде всё получается, но... почему в блоге остается светлый желтый фон, а у тебя в редакторе всё корректно. Посмотри, пожалуйста https://000149.blogspot.com/2019/04/blog-post_66.html Что-то делаю не то?

    ОтветитьУдалить
    Ответы
    1. Люба, привет тебя с прошедшим. Тут надо разбираться со значениями position: - та ещё канитель если персонально для каждой страницы. Если будет желание поизучай элемент здесь http://htmlbook.ru/css/position

      У меня здесь https://domikdom.blogspot.com/2019/04/blog-post.html посмотри как отобразилось - картинка вообще в шапку ушла.
      Люба, когда посмотришь откликнись, чтоб я её с тестового удалила.

      Удалить
    2. Да, Вика. Посмотрела. Спасибо. "Поиграю" ещё, поизучаю.

      Удалить
  6. С кодами и прочей атрибутикой всё равно, видимо, уже не разберусь, но всё равно очень красиво!!!

    ОтветитьУдалить
    Ответы
    1. Ага, Семён красиво получается. для Вас это пока трудновато будет.

      Удалить
  7. Спасибо, Вика!Шикарный эффект!

    ОтветитьУдалить
    Ответы
    1. Зоя, ту для каждого надо персональные настройки.

      Удалить
  8. Вика, мой лексикон пополнился на слово ховер-эффект)). Классные штуки ты предлагаешь).

    ОтветитьУдалить
    Ответы
    1. Валерия, главное смысл ты поняла и это важно.

      Удалить
  9. Виктория, спасибо огромное! Очень полезная статья.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск