вСкрипты для Юкоз

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

Описание:


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

1 пример (ДЕМО):


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

Код
<ul class=»demo-1 effect»>
<li>
<h2>Заголовок</h2>
<p>Описание.</p>
</li>
<li><img class=»top» src=»Ссылка на картинку» 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»>Заголовок</h2>
<p class=»zero»>Описание.</p>
</li>
<li><img class=»top» src=»Ссылка на картинку» 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=»Ссылка на картинку» alt=»»/>
<figcaption>
<h2>Заголовок</h2>
<p>Описание</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)

источник: webmaster-ucoz.ru

Похожие посты