Эффект поперечного сечение при наведении на картинку

Привет, друзья. Симпатичный, современный hover эффект поперечного сечения при наведении курсора. Это может быть картинка, баннер или просто кнопка читать далее. Покажу на примере 3 варианта, а уж какой выбрать решайте сами. Будем использовать опять тег <figure>, который уже применяли при создании карточки профиля автора. 
Чтобы посмотреть как это работает, скопируйте код целиком и установите в этом редакторе. 


поперечное сечение при наведении курсора на картинку


 <figure class="snip1573">

  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample89.jpg" alt="sample89" />

  <figcaption>

    <h3>перейти</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<figure class="snip1573 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample94.jpg" alt="sample94" />

  <figcaption>

    <h3>читать дальше</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<figure class="snip1573"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample92.jpg" alt="sample92" />

  <figcaption>

    <h3>к источнику</h3>

  </figcaption>

  <a href="#"></a>

</figure>

<style>

.snip1573 {

  background-color: #000;

  display: inline-block;

  font-family: 'Open Sans', sans-serif;

  font-size: 16px;

  margin: 10px;

  max-width: 315px;

  min-width: 230px;

  overflow: hidden;

  position: relative;

  text-align: center;

  width: 100%;

}


.snip1573 * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}


.snip1573:before,

.snip1573:after {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

  background-color: #000000;

  border-left: 3px solid #fff;

  border-right: 3px solid #fff;

  content: '';

  opacity: 0.9;

  z-index: 1;

}


.snip1573:before {

  -webkit-transform: skew(45deg) translateX(-155%);

  transform: skew(45deg) translateX(-155%);

}


.snip1573:after {

  -webkit-transform: skew(45deg) translateX(155%);

  transform: skew(45deg) translateX(155%);

}


.snip1573 img {

  backface-visibility: hidden;

  max-width: 100%;

  vertical-align: top;

}


.snip1573 figcaption {

  top: 50%;

  left: 50%;

  position: absolute;

  z-index: 2;

  -webkit-transform: translate(-50%, -50%) scale(0.5);

  transform: translate(-50%, -50%) scale(0.5);

  opacity: 0;

  -webkit-box-shadow: 0 0 10px #000000;

  box-shadow: 0 0 10px #000000;

}


.snip1573 h3 {

  background-color: #000000;

  border: 2px solid #fff;

  color: #fff;

  font-size: 1em;

  font-weight: 600;

  letter-spacing: 1px;

  margin: 0;

  padding: 5px 10px;

  text-transform: uppercase;

}


.snip1573 a {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  z-index: 3;

}


.snip1573:hover > img,

.snip1573.hover > img {

  opacity: 0.5;

}


.snip1573:hover:before,

.snip1573.hover:before {

  -webkit-transform: skew(45deg) translateX(-55%);

  transform: skew(45deg) translateX(-55%);

}


.snip1573:hover:after,

.snip1573.hover:after {

  -webkit-transform: skew(45deg) translateX(55%);

  transform: skew(45deg) translateX(55%);

}


.snip1573:hover figcaption,

.snip1573.hover figcaption {

  -webkit-transform: translate(-50%, -50%) scale(1);

  transform: translate(-50%, -50%) scale(1);

  opacity: 1;

}</style>



В коде измените адреса картинок на свои. Решётки, которые отмечены синим цветом это URL адреса страниц, куда будет осуществлён переход. Текстовые поля заменяйте соответственно. Голубым цветом, я отметила один из участков  в коде, которые можно убрать. В моём случае это последний вариант. 

Сам код эффекта поперечного сечения можно применить в любом месте блога. У становить в гаджет HTML/JavaScript или в самом сообщении. 

Всем добра, незабываемых новогодних каникул. Увидимся.

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

Введите Ваш email


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

  1. Сколько разных интересных постов у тебя для работы с картинками! Спасибо!

    ОтветитьУдалить
  2. Ирина, тебе спасибо. Да, много можно сотворить. Главное чтобы выбор был.

    ОтветитьУдалить
  3. Забавно. Не совсем понятно, зачем такой изыск, но, если он возможен... "Если звёзды зажигают..."

    ОтветитьУдалить
  4. Семён, современный веб дизайн, как и всё остальное не стоит на месте.

    ОтветитьУдалить
  5. Спасибо, Вика, очень красиво и интересно.

    ОтветитьУдалить
    Ответы
    1. Зоя, как давно не было видно тебя. Очень рада. Эффект прикольный получается. Впрочем, не так он и нов, но чуток в другой интерпретации. С Новым годом тебя.

      Удалить
  6. Виктория, у меня в блоге "Волшебный фонарик" больше нет битых ссылок. ПОКА больше нет. Ура!
    Теперь надо заниматься с кошачьим блогом.

    ОтветитьУдалить
  7. Ирина, ну ты "Гигант". Я с ними с ума скоро сойду. С Рождеством тебя.

    ОтветитьУдалить
  8. Сначала показалось, что тема называется "эффект Поперечного" (в смысле Данилы)

    ОтветитьУдалить
    Ответы
    1. Игорь, Вы меня рассмешили с утра. Ну как такой эффект ещё назвать я не придумала.

      Удалить

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