3 крутых эффекта для изображений на CSS3

Раньше для создания разных эффектов мы прибегали к помощи JavaScript, но благодаря распространению поддержки CSS3, нам не нужны скрипты для создания красивых эффектов. К сожалению, некоторые браузеры до сих пор не поддерживают CSS3 (IE9 и ниже).

В этой статье мы создадим красивые эффекты при наведении на картинку. Эти эффекты идеально подойдут для галереи и помогут рационально разместить информацию.

Пример №1

HTML разметка

Для первого примера мы будем использовать неупорядоченный список (ul), внутри которого расположим заголовок и описание картинки. Разметка для примера:

<ul class="demo-1 effect">
    <li>
        <h2>This is a cool title!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

Для создания эффекта мы используем классы demo-1 и effect.

CSS

С помощью CSS мы позиционируем наш класс demo-1, устанавливаем ширину и высоту. Так же надо спрятать, то что не поместится в указанные размеры. Так же стилизуем заголовки h2 и тег <p>, в котором находится описание. Теперь класс нашего эффекта: мы позиционируем картинку абсолютно, чтобы управлять её положением с помощью свойств top, left, right. И с помощью CSS3 свойства transition создаем плавненькую анимацию. CSS код эффекта:

.demo-1 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

Пример №2

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

HTML разметка

Разметка очень похожа на предыдущий пример. Но теперь используется класс demo-2 и новый класс zero:

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is a cool title!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS

CSS тоже очень похож на первый пример, за исключением того, что теперь для анимации используется свойство bottom. Опять используем CSS3 transition для плавной анимации:

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Пример №3

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

HTML разметка

На этот раз разметка немного изменится. Мы будем использовать HTML5 элемент figure вместе с figcaption. И, как обычно, класс поменялся на demo-3:

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

CSS

В этом примере мы будем использовать свойство backface-visibility, чтобы делать картинку прозрачной при перевороте. Для вращения мы используем свойство transform: начальное значение — rotateY(-180deg) и при наведении меняем на 180 и для изображения и для заголовка.

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

На этом всё...