Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 19 » CSS3 изображение Hover эффекты


13:36
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;

}

 


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


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

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

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди