Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Три эффекта при наведении на изображение

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

Что касается hover-эффектов, мы используем зум-эффект (масштабирование изображения) при наведении с помощью трансформации (), одновременно применим наклонный блик проскальзывающий через всё изображений с угла на угол, ну, и наконец, достаточно распространённый эффект всплывающей подписи к картинке.
Всплывающую подпись сделал самую простейшую, без особых наворотов, лишь для того что бы показать что возможно использовать сразу несколько эффектов при наведении на картинку. Въехав в тему, вы легко сможете видоизменить и подпись и другие эффекты в соответствии с вашими предпочтениями:
 
Три эффекта при наведении на изображение

По раскладке в html писать особо то и нечего. Весь расклад состоит из div-контейнера с размещенными в нём изображением и подписью к нему, на которые мы и наложим заявленные выше эффекты непосредственно уже в css,
И так, блок с картиной в html будет выглядеть примерно так^
 

<div class="box-thumb"> 
   <img src="img/image01.jpg">
    <p class="descript">НЕ БУДИТЕ РУССКОГО МЕДВЕДЯ!</p>
</div>

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

 
Теперь переходим к оформлению самого изображения и формированию эффектов с помощь. волшебных свойств CSS3. Каждое правило и свойство расписывать во всех подробностях не буду, просто размещу развёрнутые комментарии непосредственно в коде CSS. Перелопатив весь представленный в примере фарш, уверен, вы легко разберётесь что куда и зачем:
 

/* Контейнер, в котором размещаем изображение */
 
.box-thumb {
    width: 100%;
    max-width: 648px; /* отзывчивые размеры  (опционально) */
    margin: 0 auto; /* распологаем по центру */
    padding: 0;
    overflow: hidden;
    position: relative; /* относительное позиционирование */
    cursor: pointer;
/* Внешняя тень блока с изображением */
    -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* 
 * Стили изображения внутри 
 * родительского контейнера 
*/
.box-thumb img {
    max-width: 100%;
    height: auto;
    display: block;
/* трансформация - реальный масштаб картинки */
    -webkit-transform: scale(1);
    transform: scale(1);
/* время исполнения трансформации */
    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
}
/*
 * Масштабируем изображение с помощью 
 * трансформации  при наведении 
*/
.box-thumb:hover img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
 
/* Воспроизведём  эффект наклонного блика */
.box-thumb::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
/*
 * используем линейный градиент 
 * определим начальное и конечное расположение,
 * цвет, размер и элементы трансформации
*/
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
/* Создадим анимацию и установим время исполнения */
.box-thumb:hover::before {
    -webkit-animation: shine .85s;
    animation: shine .85s;
}
/*
 * описываем анимацию CSS свойств 
 * в виде перечня ключевых кадров 
*/
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
 
@keyframes shine {
    100% {
        left: 125%;
    }
}
/* Формирум блок с подписью к изображению */
.box-thumb p.descript {
    position: absolute;
    bottom: 10px;
    right: 0;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5em;
    font: 300 0.875rem/140% 'Exo 2', Tahoma, Verdana, Segoe, sans-serif;
/* Изначально скрыта */
    opacity: 0;
/* Устанавливаем плавный переход между двумя состояниями элемента */
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, transform 0.7s;
/* Используем трансформации */
    -webkit-transform: scale3d(0.9, 0.9, 1);
    transform: scale3d(0.9, 0.9, 1);
    -webkit-transform: translate3d(-180%, 0, 0);
    transform: translate3d(-180%, 0, 0);
    visibility: visible;
}
/* Изменения состояния элемента (подписи) при наведении на изображение */
.box-thumb:hover p.descript {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 3

  • Валентина: 20 ноября, 2017 в 15:15

    У вас на сайте хорошая форма для комментирования. Нет ли статьи на блоге по ее созданию?
    Статья про три эффекта доходчивая и понятная. Спасибо.

    Ответить
    • driver: 20 ноября, 2017 в 22:16

      Спасибо за отзыв.
      Статьи по форме комментирования нет, форма используется стандартная в связке с плагинами «WP Russian Quicktags» (выводит симпатичную панель с кнопками форматирования текста в комментариях) и «Subscribe To Comments» ( подписка на комментарии, позволяет читателям получать уведомления о новых комментариях).

      Ответить
  • Игорь: 21 февраля, 2019 в 22:02

    Добрый день.
    То что нужно, только подскажите как реализовать такой эффект же эффект,
    только чтобы текст появлялся после клика на блок с картинкой.
    Есть блок, внутри него картинка и заголовок, 1) при ховер на блок — картинка меняет оттенок и заголовок соответственно, 2) а при клике картинка прячется с заголовком и открывется список текстов ссылок (на ul li типа меню чтото) в этом же блоке

    Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>