Современные технологии позволяют создавать красивые интерактивные сайты, при этом большинство эффектов можно реализовать с помощью чистого
CSS, особенно с новыми возможностями
CSS3. Раньше для создания разных эффектов мы прибегали к помощи
JavaScript, но благодаря распространению поддержки
CSS3, нам не нужны скрипты для создания красивых эффектов. К сожалению, некоторые браузеры до сих пор не поддерживают
CSS3 (
IE9 и ниже).
В этой статье мы создадим красивые эффекты при наведении на картинку. Эти эффекты идеально подойдут для галереи и помогут рационально разместить информацию.
Для примера создадим эффект переворачивающейся карты: при наведении на картинку, она будет вращаться вокруг своей оси и показывать описание и заголовок.
Код
<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)
}
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
