Site icon Vavik96

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

admin

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 {
        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>
 CSS: заголовок остается вне кадра, позиционируется слева: -220px и при наведении сдвигается left: 0. Внешний вид: фиксированный размер, разный цвет шрифта и прозрачности.
.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;
    }

 

Пример

источник

Exit mobile version