наверх





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


В этом примере я покажу, как сделать красивые всплывающие изображения. По умолчанию изображения будут, например, шириной в 200px и иметь небольшую прозрачность. При наведении на них, они будут красиво увеличиваться до определенной ширины и появится обводка вокруг них. Сюда можно добавить еще чего нибудь, я лишь покажу простой пример. Начнем с состояния вида изображения по умолчанию. Добавим к изображению прозрачность:

img {
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}


Теперь собственно зададим максимальную ширину к изображению

img {
...
max-width:200px;
}


Я использовал свойство max-width, вместо обычного width для того, что бы изображение не искажалось. Ведь если ей задать свойство width, без высоты, то высота останется прежний. Конечно, можно задать и высоту, но если не знаем какую лучше задать, что бы выглядело пропорционально? Поэтому лучше использовать max-width, так как он сам задаст высоту, пропорциональную ширине. Однако, у данного свойство есть минус: он не работает в IE.

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

img {
...
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}


Вот и все свойства, которые могут присутствовать у изображения по умолчанию. Теперь добавим свойства к изображению при наведении. Для начала уберем прозрачность:

img:hover {
-moz-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1);
}


Значение 1 полностью убирает прозрачность, а 0 полностью делает элемент прозрачным.

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

img:hover {
...
max-width:350px;
}


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

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

img:hover {
...
background-image:#FFF;
padding:10px;
border:1px solid #CCCCCC;
}


Вот то все. Можно конечно сделать по своему, а как это сделать я думаю вы уже поняли.




Просмотр демо-варианта


Поделиться
Box-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный box-shadow генератор с поддержкой нескольких теней.


Комментарии — 1


hihikulus 12 июня, 12:35 ответить #

а как сделать 4 колонки и 5 рядов? кто подскажет?

У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.