Оригинальное оформление фото с текстом для Блоггер
В текст можно добавить ссылку на нужную информацию.
Работоспособность кода проверить можно в визуальном редакторе. Нужно добавить код в первое окно, а во втором смотреть результат.
Стиль оформления
Всё, что можно изменить, описано внизу, под кодом.
<div class="image-parlax" ontouchstart="this.classList.toggle('hover');">
<div class="image-container">
<div class="front-side" style="background-image: url(ваша картинка)">
<div class="inner">
<p>Фото (название картинки)</p>
<span>Тюльпаны в снегу (описание картинки)</span>
</div>
</div>
<div class="back-side">
<div class="inner">
<p>Замерзшие тюльпаны (текст на обратной стороне)</p>
</div>
</div>
</div>
</div>
<style>.image-parlax{
width: 50%;
cursor: pointer;
}
.image-container{
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.front-side, .back-side{
background-size: cover;
background-position: center;
min-height: 350px;
height: auto;
border-radius: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
text-align: center;
color: #fff;
font-size: 1.5rem;
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back-side{
background: #343434;
background: -webkit-linear-gradient(45deg, #343434 0%,#000000 100%);
background: -o-linear-gradient(45deg, #343434 0%,#000000 100%);
background: linear-gradient(45deg, #343434 0%,#000000 100%);
}
.front-side:after{
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
content: '';
display: block;
opacity: .6;
background-color: #000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 50%;
}
.image-container:hover .front-side,
.image-container:hover .back-side{
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.back-side{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.inner{
-webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
transform: translateY(-50%) translateZ(60px) scale(0.94);
top: 50%;
position: absolute;
left: 0;
width: 100%;
padding: 2rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 1px solid transparent;
-webkit-perspective: inherit;
perspective: inherit;
z-index: 2;
}
.image-container .back-side{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.image-container .front-side{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.image-container:hover .back-side{
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.image-container:hover .front-side{
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front-side .inner p{
font-size: 2rem;
margin-bottom: 2rem;
position: relative;
}
.front-side .inner p:after{
content: '';
width: 4rem;
height: 1px;
position: absolute;
background: #C6D4DF;
display: block;
left: 0;
right: 0;
margin: 0 auto;
bottom: -.75rem;
}
.front-side .inner span{
color: rgba(255,255,255,0.7);
font-family: 'Montserrat';
font-weight: 300;
}</style>
Красным выделено место, куда добавляется адрес картинки.Синим — текст.
Оранжевым — высота картинки.
Салатовым — скругление углов, если изменить на большее или меньшее число, то картинка будет выглядеть по-разному.
Голубым — ширина изображения.
Розовым — шрифт, толщина текста и цвет описания изображения.
Фиолетовым — цвет линии под названием картинки, а так же её длина и толщина.
Зелёным — цвета градиента обратной стороны изображения.
Если покопаться в коде, можно поменять и многие другие параметры, но основные я перечислила.
Комментарии со спамом удаляются.