Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак
Главная » 2013 » Март » 30 » CSS3 изображение Hover эффекты
20:38
CSS3 изображение Hover эффекты

CSS3 изображение Hover эффекты


Сегодня я расскажу вам, как создать образ CSS3 эффектов наведения. На странице галереи результате мы будем иметь 9 изображений, каждое из них имеет собственный эффект при наведении.   


ДЕМО                 СКАЧАТЬ ИСХОДНИК

 

Шаг 1. HTML

Во-первых, давайте подготовим HTML разметку для нашей галереи. Как вы это довольно легко. Здесь множество DIV объектов. Каждая из них содержит одно изображение и некоторые виртуальные маски (DIV). Последний элемент массив будет содержать две маски.

index.html

<!DOCTYPE html>

<html lang="en" >

    <head>

        <meta charset="utf-8" />

        <title>CSS3 Image Hover Effects | Script Tutorials</title>

        <link href="css/layout.css" rel="stylesheet" type="text/css" />

        <link href="css/gall.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

        <header>

            <h2>CSS3 Image Hover Effects</h2>

            <a href="http://www.script-tutorials.com/css3-image-hover-effects/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

        </header>

 

        <!-- panel with buttons -->

        <div class="photos">

            <div>

                <img src="images/pic1.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic2.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic3.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic4.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic5.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic6.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic7.jpg" />

                <div></div>

            </div>

            <div>

                <img src="images/pic8.jpg" />

                <div></div>

            </div>

            <div class="pair">

                <img src="images/pic9.jpg" />

                <div></div>

                <div></div>

            </div>

        </div>

    </body>

</html>

 

И так, разметка HTML готова, определим ее стиль.

Шаг 2. CSS

Я опускаю описание стилей layout.css. Здесь ничего интересного. Самое интересное - Следующий файл (я подготовил все необходимые стили нашей галерее):

CSS / gall.css

.photos {

    width: 945px;

    height: 400px;

    margin: 100px auto;

    position:relative;

}

.photos > div {

    background-color: rgba(128, 128, 128, 0.5);

    border: 2px solid #444;

    float: left;

    height: 100px;

    margin: 5px;

    overflow: hidden;

    position: relative;

    width: 300px;

    z-index: 1;

 

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    -ms-border-radius: 10px;

    -o-border-radius: 10px;

    border-radius: 10px;

 

    -webkit-transform:scale(1.0);

    -moz-transform:scale(1.0);

    -ms-transform:scale(1.0);

    -o-transform:scale(1.0);

    transform:scale(1.0);

 

    -webkit-transition-duration: 0.5s;

    -moz-transition-duration: 0.5s;

    -ms-transition-duration: 0.5s;

    -o-transition-duration: 0.5s;

    transition-duration: 0.5s;

}

.photos > div img{

    width: 100%;

}

.photos > div:hover{

    z-index: 10;

 

    -webkit-transform:scale(2.0);

    -moz-transform:scale(2.0);

    -ms-transform:scale(2.0);

    -o-transform:scale(2.0);

    transform:scale(2.0);

}

.photos > div div {

    background: url(../images/hover.gif) repeat scroll 0 0 transparent;

    cursor: pointer;

    height: 100%;

    left: 0;

    opacity: 0.5;

    position: absolute;

    top: 0;

    width: 100%;

    z-index: 15;

 

    -webkit-transition-duration: 0.5s;

    -moz-transition-duration: 0.5s;

    -ms-transition-duration: 0.5s;

    -o-transition-duration: 0.5s;

    transition-duration: 0.5s;

}

.photos > div:nth-child(1):hover div {

    height: 0%;

}

 

.photos > div:nth-child(2):hover div {

    height: 0%;

    margin-top: 100px;

}

.photos > div:nth-child(3):hover div {

    width: 0%;

}

.photos > div:nth-child(4):hover div {

    margin-left: 300px;

    width: 0%;

}

.photos > div:nth-child(5):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

}

.photos > div:nth-child(6):hover div {

    margin-left: 150px;

    width: 0%;

}

.photos > div:nth-child(7):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

 

    -webkit-transform: rotateX(360deg);

    -moz-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    -o-transform: rotate(-360deg);

    transform: rotate(-360deg);

}

.photos > div:nth-child(8):hover div {

    height: 0%;

    margin-left: 150px;

    margin-top: 50px;

    width: 0%;

 

    -webkit-transform: rotateZ(600deg);

    -moz-transform: rotateZ(600deg);

    -ms-transform: rotateZ(600deg);

    -o-transform: rotateZ(600deg);

    transform: rotateZ(600deg);

}

.photos > div.pair div {

    width: 50%;

}

.photos > div.pair div:nth-child(odd) {

    margin-left: 150px;

}

.photos > div.pair:hover div {

    width: 0%;

}

.photos > div.pair:hover div:nth-child(odd) {

    margin-left: 300px;

}

 

ДЕМО              СКАЧАТЬ ИСХОДНИК

Источник  урока

Категория: HTML/CSS | Просмотров: 1018 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Статический анализ: ошибки в медиаплеере и безглючная аська
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Менеджмент]
Факторы микросреды организации
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ
[Безопасность систем]
Резервирование и восстановление

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми
Copyright MyCorp © 2024Конструктор сайтов - uCoz