Инфо блоки на сайт
Чтение на 1 мин.
Прикрутил симпатичную и простую анимацию в проекте
Оживил галерею на сайте проекта mair.moscow
Использовал библиотеку tympanus.
Упрощённый код CSS
figure:hover .hover-block {
-webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
-ms-transform: translateY(-90px);
transform: translateY(-90px);
}
figcaption {
height: 90px;
width: 100%;
top: auto;
bottom: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
figcaption a {
position: absolute;
right: 20px;
top: 30px;
}Упрощённый код HTML
<ul>
<li>
<figure>
<img src="images/1.png" alt="img01">
<figcaption>
<h3>Camera</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115632-Camera">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/2.png" alt="img02">
<figcaption>
<h3>Music</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1115960-Music">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/3.png" alt="img03">
<figcaption>
<h3>Settings</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116685-Settings">Take a look</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="images/4.png" alt="img04">
<figcaption>
<h3>Safari</h3>
<span>Jacob Cummings</span>
<a href="http://dribbble.com/shots/1116775-Safari">Take a look</a>
</figcaption>
</figure>
</li>
</ul>
Живите мирно и процветайте
Пишите мне в telegram @klimovrv
Пишите мне в telegram @klimovrv