Вероятно вы встречали эффект разворота изображение, где на другой стороне было описание этой картинки. Теперь вы можете установить на свой сайт это оригинальную анимацию. Так как она подойдет как под стандартный шаблон и безусловно на обновленный дизайн. Ранее нужно было подключать jQuery, теперь все можно выставить на чистом CSS3.
Такой трюк можно поставить как на галерею или фотоальбом, вообщем по факту, там где много предоставлено картинок. Так как гости и пользователи могут изначально посмотреть, а если им нужно ознакомиться, то при наведение картинка разворачивается и предоставляет краткое описание.
HTML
Код
<div class="presentan-depossib">
<div class="tesamilpod">
<div class="savetun"><img src="http://images.vfl.ru/ii/1539545643/7c8f8f4d/23798143.png"></div>
<div class="kitsagolpem"><span>Здесь идет описание картинки</span></div>
</div>
</div>
CSS
Код
.presentan-depossib {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #d5d5d5;
display: flex;
justify-content: center;
align-items: center;
cursor:pointer;
}
.tesamilpod {
width: 300px;
height: 300px;
position: relative;
perspective: 1000px;
border: 2px solid #f1f1f1;
}
.savetun, .kitsagolpem {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
backface-visibility: hidden;
background-color: #f1f1f1;
}
.savetun img {
max-width: 100%;
min-width: 100%;
height: auto;
}
.kitsagolpem {
transform: rotateY(180deg);
}
.tesamilpod:hover .savetun {
transform: rotateY(180deg);}
.tesamilpod:hover .kitsagolpem {
transform: rotateY(360deg);}
Демонстрация
