Интересный эффект для миниатюр c помощью CSS3

Пожалуй, на каждом сайте можно встретить миниатюры, которые содержат лишь малую часть информации которая необходима пользователю, зачастую такие превью изображений достаточно скучны, и не совсем привлекают пользователей, они сливаются с общей картиной сайта, и теряют свою способность притягивать взор посетителя к необходимой информации. Но как решить данную проблему, и создать такие миниатюры, чтобы привлекали и завораживали взор посетителей. В данном уроке мы рассмотрим как создать интересный эффект для класса hover.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

В нашем примере мы будем использовать миниатюры, которые открывают дополнительную информацию при наведении курсора мыши на них. Структура будет построена на jQuery, который позволит вывести изображение в сложенном или отогнутом виде при наведении курсора мыши. Для формирования эффектов будем использовать трансформации CSS 3D.

Шаг 1. HTML

Для начала мы рассмотрим разметку html, которая достаточно простая и имеет следующий вид.

<div id="grid" class="main">
 <div class="view">
 <div class="view-back">
 <span data-icon="A">566</span>
 <span data-icon="B">124</span>
 <a href="#">&rarr;</a>
 </div>
 <img src="images/1.jpg" />
 </div>
</div>

</div>

</div>

Каждая миниатюра заключена в отдельный элемент div в который включен еще один элемент div для дополнительной информации (view-back). Структура, которая будет создаваться для каждого элемента div с классом view с помощью JavaScript:

<div class="view">
 <div class="view-back">
 <!-- ... -->
 </div>
 <div class="slice s1" style="background-image: url(images/1.jpg); ">
 <span class="overlay"></span>

 <div class="slice s2" style="background-image: url(images/1.jpg); ">
 <span class="overlay"></span>

 <div class="slice s3" style="background-image: url(images/1.jpg); ">
 <span class="overlay"></span>

 <div class="slice s4" style="background-image: url(images/1.jpg); ">
 <span class="overlay"></span>

 <div class="slice s5" style="background-image: url(images/1.jpg); ">
 <span class="overlay"></span>
</div><!-- /s5 -->
</div><!-- /s4 -->
</div><!-- /s3 -->
</div><!-- /s2 -->
</div><!-- /s1 -->
</div><!-- /view -->

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Каждый слой имеет соответствующее изображение в качестве фона. Так как у нас получается вложенная структура, то можно контролировать эффект. Дополнительно используется покрывающий элемент span, который помогает придать реалистичности эффекту.

$.fn.hoverfold = function( args ) {

    this.each( function() {

        $( this ).children( '.view' ).each( function() {

            var $item   = $( this ),
                img     = $item.children( 'img' ).attr( 'src' ),
                struct  = '<div>';
                    struct  +='<div>';
                        struct  +='<div>';
                            struct  +='<div>';
                                struct  +='<div>';
                                struct  +='</div>';
                            struct  +='</div>';
                        struct  +='</div>';
                    struct  +='</div>';
                struct  +='</div>';

            var $struct = $( struct );

            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );

        } );

    });

};

$.fn.hoverfold = function( args ) {

this.each( function() {

$( this ).children( '.view' ).each( function() {

var $item = $( this ),

img = $item.children( 'img' ).attr( 'src' ),

struct = '<div>';

struct +='<div>';

struct +='</div>';

var $struct = $( struct );

$item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span ></span>' ) );

} );

});

};

Теперь можно делать эффект для события. Для начала определим общие стили и затем сформируем первую демонстрацию.

Шаг 2. CSS

Определим стили для элемента div view. Здесь добавляется перспектива:

.view {
    width: 316px;
    height: 216px;
    margin: 10px;
    float: left;
    position: relative;
    border: 8px solid #fff;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    background: #333;
    perspective: 500px;
}

.view {

width: 316px;

height: 216px;

margin: 10px;

float: left;

position: relative;

border: 8px solid #fff;

box-shadow: 1px 1px 2px rgba(0,0,0,0.05);

background: #333;

perspective: 500px;

}

Для слоев нужно добавить несколько свойств 3D и переход:

.view .slice{
    width: 60px;
    height: 100%;
    z-index: 100;
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 150ms ease-in-out;

}

.view .slice{

width: 60px;

height: 100%;

z-index: 100;

transform-style: preserve-3d;

transform-origin: left center;

transition: transform 150ms ease-in-out;

}

Часть описания, которая показывается при сдвиге слоя, будет иметь следующие стили:

.view div.view-back{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background: #666;
    z-index: 0;
}

.view div.view-back{

width: 50%;

height: 100%;

position: absolute;

right: 0;

background: #666;

z-index: 0;

}

Теперь зададим стили для элементов span и ссылок:

.view-back span {
    display: block;
    float: right;
    padding: 5px 20px 5px;
    width: 100%;
    text-align: right;
    font-size: 16px;
    color: rgba(255,255,255,0.6);
}

.view-back span:first-child {
    padding-top: 20px;
}

.view-back a {
    display: bock;
    font-size: 18px;
    color: rgba(255,255,255,0.4);
    position: absolute;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
}

.view-back a:hover {
    color: #fff;
    border-color: #fff;
}

.view-back span {

display: block;

float: right;

padding: 5px 20px 5px;

width: 100%;

text-align: right;

font-size: 16px;

color: rgba(255,255,255,0.6);

}

.view-back span:first-child {

padding-top: 20px;

}

.view-back a {

display: bock;

font-size: 18px;

color: rgba(255,255,255,0.4);

position: absolute;

right: 15px;

bottom: 15px;

border: 2px solid rgba(255,255,255,0.3);

border-radius: 50%;

width: 30px;

height: 30px;

line-height: 22px;

text-align: center;

font-weight: 700;

}

.view-back a:hover {

color: #fff;

border-color: #fff;

}

Для иконок перед элементом span будем использовать специальный шрифт, который создан с помощью сервиса Fontello. Так как мы добавляем атрибут data-icon к элементу, то будем использовать псевдо-класс :before для вывода:

.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
    color: rgba(255,255,255,0.2);
    text-shadow: 0 0 1px rgba(255,255,255,0.2);
    padding-right: 5px;
}

.view-back span[data-icon]:before {

content: attr(data-icon);

font-family: 'icons';

color: #aaa;

color: rgba(255,255,255,0.2);

text-shadow: 0 0 1px rgba(255,255,255,0.2);

padding-right: 5px;

}

Все слои, кроме первого, нужно сдвигать вправо:

.view .s2,
.view .s3,
.view .s4,
.view .s5 {
    transform: translateX(60px);
}

.view .s2,

.view .s3,

.view .s4,

.view .s5 {

transform: translateX(60px);

}

Установим соответствующее положение фона для каждого слоя:

.view .s1 {
    background-position: 0px 0px;
}
.view .s2 {
    background-position: -60px 0px;
}
.view .s3 {
    background-position: -120px 0px;
}
.view .s4 {
    background-position: -180px 0px;
}
.view .s5 {
    background-position: -240px 0px;
}

.view .s1 {

background-position: 0px 0px;

}

.view .s2 {

background-position: -60px 0px;

}

.view .s3 {

background-position: -120px 0px;

}

.view .s4 {

background-position: -180px 0px;

}

.view .s5 {

background-position: -240px 0px;

}

Перекрывающие слои изначально будут иметь непрозрачность 0, а затем мы сделаем переход и изменение уровня непрозрачности при наведении курсора мыши:

.view .overlay {
    width: 60px;
    height: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 150ms ease-in-out;
}

.view:hover .overlay {
    opacity: 1;
}

.view .overlay {

width: 60px;

height: 100%;

opacity: 0;

position: absolute;

transition: opacity 150ms ease-in-out;

}

.view:hover .overlay {

opacity: 1;

}

Зафиксируем положение и значение свойства z-index для изображений (для того, чтобы скрыть заднюю часть). Также добавим переходы для тех браузеров, которые не поддерживают 3D трансформации:

.view img {
    position: absolute;
    z-index: 0;
    transition: left 0.3s ease-in-out;
}

.view img {

position: absolute;

z-index: 0;

transition: left 0.3s ease-in-out;

}

Для случаев, когда браузер не поддерживает замечательные свойства 3D, будем загружать дополнительную таблицу стилей fallback.css, которая содержится следующий код:

.view {
    overflow: hidden;
}

.view:hover img {
    left: -85px;
}

.view div.view-back {
    background: #666;
}

.view {

overflow: hidden;

}

.view:hover img {

left: -85px;

}

.view div.view-back {

background: #666;

}

Слои будут смещаться влево при наведении курсора мыши.

Для данного примера мы сделаем эффект складывания изображения. Для решения задачи установим значение свойства perspective для элемента span view и переходы для остальных элементов.

.view {
    perspective: 1050px;
}

.view div {
    transition: all 0.3s ease-in-out;
}

.view {

perspective: 1050px;

}

.view div {

transition: all 0.3s ease-in-out;

}

Второй, третий, четвертый и пятый слои будут переводиться и вращаться в 3D, создавая эффект складывания:

.view:hover .s2{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3,
.view:hover .s5{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
    transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

.view:hover .s2{

transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);

}

.view:hover .s3,

.view:hover .s5{

transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);

}

.view:hover .s4{

transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);

}

Каждый из слоев будет смещаться влево. Так как мы хотим исключить пробелы между слоями, то установим ширину 59px. Второй слой будет поворачиваться на -45 градусов. Четвертый слайд вращается в другую сторону. А третий и пятый слои поворачиваются на 90 градусов.

.view .s2 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s3 > .overlay {
    background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s4 > .overlay {
    background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s5 > .overlay {
    background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view .s2 > .overlay {

background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);

}

.view .s3 > .overlay {

background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);

}

.view .s4 > .overlay {

background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);

}

.view .s5 > .overlay {

background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);

}

Для той части миниатюры, которая открывается при наведении курсора мыши, также установим градиент для фона, чтобы имитировать тень:

.view div.view-back{
    background: linear-gradient(left, #0a0a0a 0%,#666666 100%);
}

.view div.view-back{

background: linear-gradient(left, #0a0a0a 0%,#666666 100%);

}

В демонстрации приведены также другие эффекты, код для которых можно посмотреть в исходниках.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Интересный эффект для миниатюр на CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи

Интересный эффект для миниатюр на CSS3

Шаг 1. HTML

Шаг 2. CSS

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Наши партнеры

Опрос блога

Подписывайтесь

Популярные статьи