Главная » HTML & CSS » Три эффекта при наведении на изображение

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

Много раз писал о различных 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 и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Валентина:

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

    Статья про три эффекта доходчивая и понятная. Спасибо.

    Ответить
    • driver:

      Спасибо за отзыв.

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru