Современные технологии позволяют создавать красивые интерактивные сайты, при этом большинство эффектов можно реализовать с помощью чистого CSS, особенно с новыми возможностями CSS3. Раньше для создания разных эффектов мы прибегали к помощи JavaScript, но благодаря распространению поддержки CSS3, нам не нужны скрипты для создания красивых эффектов. К сожалению, некоторые браузеры до сих пор не поддерживают CSS3 (IE9 и ниже).
В этой статье мы создадим красивые эффекты при наведении на картинку. Эти эффекты идеально подойдут для галереи и помогут рационально разместить информацию.
1 пример
-
This is a cool title!
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.
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 пример
-
This is a cool title!
Lorem ipsum dolor sit amet.
Во втором примере картинка будет съезжать вниз при наведении, показывая при этом заголовок и описание.
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 пример
-
This is a cool title!
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.
Для последнего примера создадим эффект переворачивающейся карты: при наведении на картинку, она будет вращаться вокруг своей оси и показвать описание и заголовок.
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)
}
На этом всё
Источник