CSS3 увеличение изображения при наведении | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSCSS3 увеличение изображения при наведении
Дата: 19.04.2013 в 18:11 | Просмотров: 9817

CSS3 увеличение изображения при наведении

CSS3 увеличение изображения при наведении
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня я расскажу Вам, как создать CSS3 увеличение изображения при наведении. Я думаю, что Вы уже встречали способ, как это реализовать с помощью JavaScript. Но я постараюсь сделать что-то подобное с использованием только лишь одного CSS3. В результате мы будем иметь 9 изображений, каждое из которых будет иметь собственный эффект при наведении. Этот эффект, думаю, будет особенно полезен для сайта, который имеет галерею изображений или же просто портфолио.

HTML код

Во-первых, подготовим основную структуру HTML для нашей демонстрационной галереи. Как вы видите, сама структура довольно проста – набор DIV объектов. Каждый из них, внутри содержит одно изображение и одну виртуальную маску div. Только одно последнее изображение будет иметь две маски.

CSS стили

Описывать файл layout.css мы не будем, там нет ничего интересного (посмотреть Вы его можете в исходниках). Самое интересное – следующие стили, где присутствуют все необходимые функции нашей галереи, которые будут увеличивать изображение при наведении:

Ну что, я думаю этот эффект бал Вам интересен, и Вы найдете ему применение на своем сайте.

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.script-tutorials.com/css3-image-hover-effects/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Отличная статья, никак не могла найти то что нужно и вот нашла, спасибо!
      Мне очень пригодилась))))))

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Здравствуйте! Приятно, что данный материал был Вам полезен,
        Заглядывайте к нам почаще, и надеюсь найдёте ещё много интересного и полезного для себя;)

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