RollOver-Эффекты для подписи фотографий

Transition означает переход. На самом деле это постоянно происходит в нашей жизни. Хотя это заманчиво философствовать о переходах – Я хочу показать Вам интересные переходы интерактивного дизайна. Переходы мы знаем из фильма – переход от одной сцены к другой. В дизайне мы имеем в виду движения элементов интерфейса. Пример навигации на SmartPhone: пользователь переходит между экранами.
С помощью CSS3 можно создать простые и элегантные переходы для веб-сайтов.

Описание переходов с разнообразными эффектами:

1. Простое перекрытие
2. Слайдинг на картинку
3. Описаниие вытесняет картинку

Основной код HTML и CSS для трёх примеров

HTML: Каждый пример одинаково построен:  DIV.imageBox с IMG и DIV.figure. Эффекты находятся в CSS-Class.

<div class="imageBox">
<img src="img/bild.png" width="220" height="220" />
<div class="figure">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>

CSS

• BODY шириной 960 Pixel центрирован и данные шрифта установлены .
• DIV.imageBox: Position:relative установлен, при этом описание картинки внутри Box может быть установлено абсолютно. DIV.imageBox имеет постоянный размер и overflow: hidden, при этом подпись не видна вне бокса.
• DIV.figure: Box для подписи, позиционирован absolute по нижнему краю DIV.imageBox ; немного padding, margin и background:white для лучшего вида.

body {
        width:  960px;
        margin: 50px auto; 
        font-family: helvetica;
        font-size: 16px;
    }
    .imageBox {
        position: relative;
        overflow: hidden;
        width: 220px; height:220px;
        float: left;
        margin-right: 100px;   
    }
    .figure {
        position: absolute;
        bottom: 0; left: 0;
        padding: 5px;
        margin:5px;
        background: white;
    }

1. CSS3-Transition: Простое перекрытие

HTML: Box для подписи DIV.figure получает второй класс tr-opacity, в котором Transition можно настраивать.

<div class="figure tr-opacity">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

CSS известный пример Transition: Transition с настройками прозрачности для перекрытия и :hover-Selector, что бы обозначить конечное состояние.

.imageBox .tr-opacity {
        opacity:0;
        -webkit-transition: opacity 0.5s;
    }
    .imageBox:hover .tr-opacity {
        opacity:1;
    }

2. CSS3-Transition: Слайдинг на картинку

HTML: Box для подписи DIV.figure получает второй класс .tr-slideIn.

<div class="figure .tr-slideIn">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

.imageBox .tr-slideIn {
        left: -220px;
        width: 210px; height: 130px;
        margin: 0;
        padding-top: 85px;
        opacity: 0.7;  
        background:grey;
        color: white;
        -webkit-transition: all 0.5s;
    }
    .imageBox:hover .tr-slideIn {
        left: 0;
    }

2. CSS3-Transition: Описаниие вытесняет картинку

HTML: Для последнего примера, HTML должен быть изменён, потому что изображение также анимированное. В то время как Надпись сдвигается, как и в предыдущем примере, изображение перемещается справа. Для этого IMG вложен в DIV.tr–slideImgOut.

 <div class="imageBox">
        <div class="tr-slideImgOut"><img src="img/bild.png" width="220" height="220" /></div>
        <div class="figure tr-slideIn">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    </div>

CSS: добавляется второй класс tr-slideImgOut для Bildbox. Diese wird wie die Bildunterschrift position: absolute gesetzt und nach genau gleichem Muster mit einer Transition bei Hover links aus dem Bild bewegt. Dann wirkt es so, als ob die Bildunterschrift das Bild rausschiebt.

Это позиционирует Надпись абсолютно набор и ровно по той же схеме с переходом на Hover в левой части картины. Тогда это выглядит, как если заголовок выталкивает изображение.

.imageBox .tr-slideImgOut {
        position: absolute;
        top: 0; left: 0px;
        -webkit-transition: left 0.5s;
    }
    .imageBox:hover .tr-slideImgOut {
        left: 220px;
    }

Пример

источник