Матвей Земсков

Заметки веб-мастера

Пятница, 15 января 2016 10:50

Реализуем hover-эффект над картинкой с помощью CSS3

Оцените материал
(0 голосов)

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

В этом уроке будет показано как при помощи CSS можно добиться такого же hover эффекта. Кроме того, будет рассказано как можно настроить анимацию под себя.

Шаг 1. HTML-код

Добавьте следующий код на страницу вашего сайта:

HTML

<div class="block">
  <img src="/1.jpg" title="" alt="" />
  <div class="block-caption">Заголовок изображения</div>
</div>

Шаг 2. CSS-правила

Добавьте следующий CSS-код в файл стилей вашего сайта:

CSS

	.block {
		display: block;
		height: 425px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		width: 640px;
	}
	.block img {
		transition: all 1s ease-in-out 0s;
		-moz-transition: all 1s ease-in-out 0s;
		-webkit-transition: all 1s ease-in-out 0s;
		-o-transition: all 1s ease-in-out 0s;
	}
	.block .block-caption {
		background: rgba(0,0,0,0.6);
		bottom: 0;
		color: #fff;
		display: table;
		left: 0;
		opacity: 0;
		padding: 10px 0;
		position: absolute;
		transition: all 0.2s ease-in-out 0s;
		-moz-transition: all 0.2s ease-in-out 0s;
		-webkit-transition: all 0.2s ease-in-out 0s;
		-o-transition: all 0.2s ease-in-out 0s;
		width: 640px;
	}
	.block:hover .block-caption {
		opacity: 1;
	}
	.block:hover img {
		transform: scale(1.5) rotateZ(-5deg);
		-moz-transform: scale(1.5) rotateZ(-5deg);
		-webkit-transform: scale(1.5) rotateZ(-5deg);
		-o-transform: scale(1.5) rotateZ(-5deg);
	}

Если ваш сайт работает под управлением какой-либо CMS (Joomla, WordPress или Drupal), возможно для добавления CSS-стилей придется воспользоваться сторонним плагином.

Шаг 3. Кастомизируем CSS под себя

Для корректного отображения ваших изображений, вам будет нужно указать свои значения следующих параметров:

  • Размер изображения: измените значения в приведенном выше коде на свои;
  • Чтобы отображать блок с изображением в центре родительского блока укажите значение margin равное 0 auto;

    CSS

    	.block {
    		height: 425px;
    		margin: 0 auto;
    		width: 640px;
    	}
    
  • Измените значение свойств transition у изображения и блока с подписью;
  • У блока с подписью ширина должна быть такой же как у изображения;

    CSS

    	.block img {
    		transition: all 1s ease-in-out 0s;
    		-moz-transition: all 1s ease-in-out 0s;
    		-webkit-transition: all 1s ease-in-out 0s;
    		-o-transition: all 1s ease-in-out 0s;
    	}
    	.block .block-caption {
    		transition: all 0.2s ease-in-out 0s;
    		-moz-transition: all 0.2s ease-in-out 0s;
    		-webkit-transition: all 0.2s ease-in-out 0s;
    		-o-transition: all 0.2s ease-in-out 0s;
    		width: 640px;
    	}
    
  • CSS-cвойства transform поддерживаются не всеми браузерами, поэтому помимо стандартного свойства, приходится использовать нестандартные (с префиксами браузеров):
    • transform: стандартное правило;
    • -webkit-transform: Chrome и Safari;
    • -moz-transform: Firefox;
    • -o-transform: Opera;

    Для получения подробной информации о поддержке CSS-правил transform различными браузерами, посетите сайт caniuse.com.

  • Для получения различных анимационных hover эффектов, поэкспериментируйте над значениями scale(), rotateZ() и rotateY();

    CSS

    	.block:hover img {
    		transform: scale(1.5) rotateZ(-5deg);
    		-moz-transform: scale(1.5) rotateZ(-5deg);
    		-webkit-transform: scale(1.5) rotateZ(-5deg);
    		-o-transform: scale(1.5) rotateZ(-5deg);
    	}
    

Шаг 4. Просмотр результата

Если все сделано правильно, анимационный hover эффект будет виден при наведении курсора мыши на изображение.

анимационный эффект при наведении курсора мыши на изображение

Демо-страница

Оригинал статьи - https://www.ostraining.com/blog/coding/transition-and-transform-css3/

Прочитано 1276 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: