Оригинальное оформление фото с текстом для Блоггер

Очень интересное оформление фотографий нашла на сайте https://stylecss.ru/. Фотография, при таком оформлении, будет с ховер-эффектом — вращение. Так же с двух сторон на картинке можно написать текст. Данный стиль оформления можно использовать в статье или добавить в виде гаджета на боковую панель или в подвал сайта. Как вариант — оформить виджет Об авторе, добавив своё фото. 
В текст можно добавить ссылку на нужную информацию.

Стиль оформления

Стиль оформления
Работоспособность кода проверить можно в визуальном редакторе. Нужно добавить код в первое окно, а во втором смотреть результат. 
Всё, что можно изменить, описано внизу, под кодом.
<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>
Красным выделено место, куда добавляется адрес картинки.
Синим — текст.
Оранжевым — высота картинки.
Салатовым — скругление углов, если изменить на большее или меньшее число, то картинка будет выглядеть по-разному.
Голубым — ширина изображения.
Розовым — шрифт, толщина текста и цвет описания изображения. 
Фиолетовым — цвет линии под названием картинки, а так же её длина и толщина.
Зелёным — цвета градиента обратной стороны изображения.
Если покопаться в коде, можно поменять и многие другие параметры, но основные я перечислила.

Ваши комментарии:

Комментарии со спамом удаляются.