CSS эффекты при наведении курсора на изображение

Создаем класс для всех изображений

Изображение должны обязательно принадлежать классу pic. Он содержит информацию об расположении блока с изображением — float; о высоте и ширине блока —  height и width; тип отображение, если изображении больше, чем размер блока —  overflow, а также информацию об рамке — border, тени — box-shadow  и отступе — margin. Полный CSS  класса pic будет выглядеть так:

Масштабирование и панорамирование

Увеличение

cssimagehovers-2

Теперь к самим эффектам. Например, в эффекте «Увеличение«,  HTML — код будет выглядеть так:

HTML

где,  class=»grow pic» выполняет подключение к обязательному классу  pic и к своему эффекту grow. CSS будет иметь вот такой вид:

CSS

 

Сокращение в объеме

cssimagehovers-3

HTML

CSS

 

Боковое панорамирование

cssimagehovers-4

HTML

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

CSS

 

Вертикальное панорамирование

cssimagehovers-5

HTML

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

CSS

 

Преобразования

Наклон

cssimagehovers-6

HTML

CSS

 

Округление

cssimagehovers-7

HTML

CSS

 

Фокусирование

cssimagehovers-8

HTML

CSS

 

Фильтры Webkit

Расплывшиеся очертания

cssimagehovers-10

HTML

CSS

 

Обесцвечивание

cssimagehovers-11

HTML

CSS

 

Полировка / яркость

cssimagehovers-12

HTML

CSS

  Money doesnt have to be the www.homework-writer.com spur or the genuinely rich members of our profession would not continue to write productively and well!

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©