В примерах использованы для контраста тёмно - белые цвета. Вы сможете легко их подогнать под свой дизайн. Вам всего лишь нужно определиться с картинкой, вашей фотографией и скопировать код нужного варианта. Что нужно изменить разберу ниже.
Вариант 1. Ваша фотография или любая другая картинка. В состоянии покоя будет выглядеть примерно так
ДО |
ПОСЛЕ |
<figure class="snip1477">
<img alt="" src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg
" />
<div class="title">
<div>
<h3>
Привет</h3>
<h4>
Я Виктория Барад</h4>
</div>
</div>
<figcaption>
я автор блога шпаргалки блогерши.Добро пожаловать!
</figcaption>
<a href="http://www.shpargalochki.ru/"></a>
</figure>
<style>
figure.snip1477 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
background-color: #000000;
}
figure.snip1477 *,
figure.snip1477 *:before,
figure.snip1477 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.55s ease;
transition: all 0.55s ease;
}
figure.snip1477 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
opacity: 0.9;
}
figure.snip1477 .title {
position: absolute;
top: 58%;
left: 25px;
padding: 5px 10px 10px;
}
figure.snip1477 .title:before,
figure.snip1477 .title:after {
height: 2px;
width: 400px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.snip1477 .title:before {
top: 0;
left: 10px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
figure.snip1477 .title:after {
bottom: 0;
right: 10px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
figure.snip1477 .title div:before,
figure.snip1477 .title div:after {
width: 2px;
height: 300px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.snip1477 .title div:before {
top: 10px;
right: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
figure.snip1477 .title div:after {
bottom: 10px;
left: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
figure.snip1477 h2,
figure.snip1477 h4 {
margin: 0;
text-transform: uppercase;
}
figure.snip1477 h2 {
font-weight: 300;
}
figure.snip1477 h4 {
display: block;
font-weight: 600;
background-color: #ffffff;
padding: 5px 10px;
color: #000000;
}
figure.snip1477 figcaption {
position: absolute;
bottom: 42%;
left: 25px;
text-align: left;
opacity: 0;
padding: 5px 60px 5px 10px;
font-size: 0.8em;
font-weight: 500;
letter-spacing: 1.5px;
}
figure.snip1477 figcaption p {
margin: 0;
}
figure.snip1477 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
figure.snip1477:hover img,
figure.snip1477.hover img {
zoom: 1;
filter: alpha(opacity=35);
-webkit-opacity: 0.35;
opacity: 0.35;
}figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after,
figure.snip1477:hover .title div:before,
figure.snip1477.hover .title div:before,
figure.snip1477:hover .title div:after,
figure.snip1477.hover .title div:after {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.snip1477:hover figcaption,
figure.snip1477.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
</style>
<img alt="" src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg
" />
<div class="title">
<div>
<h3>
Привет</h3>
<h4>
Я Виктория Барад</h4>
</div>
</div>
<figcaption>
я автор блога шпаргалки блогерши.Добро пожаловать!
</figcaption>
<a href="http://www.shpargalochki.ru/"></a>
</figure>
<style>
figure.snip1477 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: center;
font-size: 16px;
background-color: #000000;
}
figure.snip1477 *,
figure.snip1477 *:before,
figure.snip1477 *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.55s ease;
transition: all 0.55s ease;
}
figure.snip1477 img {
max-width: 100%;
backface-visibility: hidden;
vertical-align: top;
opacity: 0.9;
}
figure.snip1477 .title {
position: absolute;
top: 58%;
left: 25px;
padding: 5px 10px 10px;
}
figure.snip1477 .title:before,
figure.snip1477 .title:after {
height: 2px;
width: 400px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.snip1477 .title:before {
top: 0;
left: 10px;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
figure.snip1477 .title:after {
bottom: 0;
right: 10px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
figure.snip1477 .title div:before,
figure.snip1477 .title div:after {
width: 2px;
height: 300px;
position: absolute;
content: '';
background-color: #ffffff;
}
figure.snip1477 .title div:before {
top: 10px;
right: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
figure.snip1477 .title div:after {
bottom: 10px;
left: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
figure.snip1477 h2,
figure.snip1477 h4 {
margin: 0;
text-transform: uppercase;
}
figure.snip1477 h2 {
font-weight: 300;
}
figure.snip1477 h4 {
display: block;
font-weight: 600;
background-color: #ffffff;
padding: 5px 10px;
color: #000000;
}
figure.snip1477 figcaption {
position: absolute;
bottom: 42%;
left: 25px;
text-align: left;
opacity: 0;
padding: 5px 60px 5px 10px;
font-size: 0.8em;
font-weight: 500;
letter-spacing: 1.5px;
}
figure.snip1477 figcaption p {
margin: 0;
}
figure.snip1477 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
figure.snip1477:hover img,
figure.snip1477.hover img {
zoom: 1;
filter: alpha(opacity=35);
-webkit-opacity: 0.35;
opacity: 0.35;
}figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after,
figure.snip1477:hover .title div:before,
figure.snip1477.hover .title div:before,
figure.snip1477:hover .title div:after,
figure.snip1477.hover .title div:after {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
figure.snip1477:hover .title:before,
figure.snip1477.hover .title:before,
figure.snip1477:hover .title:after,
figure.snip1477.hover .title:after {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
figure.snip1477:hover figcaption,
figure.snip1477.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
</style>
ДО |
ПОСЛЕ НАВЕДЕНИЯ МЫШИ |
<figure class="snip1482">
<figcaption>
<h2>Вика Барад</h2>
<p>Я автор блога шпаргалки блогерши. Добро пожаловать!.</p>
</figcaption>
<a href="http://www.shpargalochki.ru/"></a><img src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg" />
</figure>
<style>
.snip1482 {
font-family: 'Fauna One', Arial, sans-serif;
position: relative;
margin: 10px 20px;
min-width: 230px;
max-width: 295px;
min-height: 220px;
width: 100%;
color: #ffffff;
text-align: right;
line-height: 1.4em;
background-color: #1a1a1a;
font-size: 16px;
}
.snip1482 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1482 img {
position: absolute;
right: 0%;
top: 50%;
opacity: 1;
width: 100%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.snip1482 figcaption {
position: absolute;
width: 50%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px 0 20px 20px;
}
.snip1482 h2,
.snip1482 p {
margin: 0;
width: 100%;
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
.snip1482 h2 {
font-family: 'Playfair Display', Arial, sans-serif;
text-transform: uppercase;
margin-bottom: 5px;
}
.snip1482 p {
font-size: 0.8em;
}
.snip1482 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1482:hover img,
.snip1482.hover img {
width: 55%;
right: -10%;
}
.snip1482:hover figcaption h2,
.snip1482.hover figcaption h2,
.snip1482:hover figcaption p,
.snip1482.hover figcaption p {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
</style>
<figcaption>
<h2>Вика Барад</h2>
<p>Я автор блога шпаргалки блогерши. Добро пожаловать!.</p>
</figcaption>
<a href="http://www.shpargalochki.ru/"></a><img src="http://www.shpargalochki.ru/"></a><img src="https://pp.userapi.com/c635100/v635100635/2830c/jvJe_ugaJhE.jpg" />
</figure>
<style>
.snip1482 {
font-family: 'Fauna One', Arial, sans-serif;
position: relative;
margin: 10px 20px;
min-width: 230px;
max-width: 295px;
min-height: 220px;
width: 100%;
color: #ffffff;
text-align: right;
line-height: 1.4em;
background-color: #1a1a1a;
font-size: 16px;
}
.snip1482 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1482 img {
position: absolute;
right: 0%;
top: 50%;
opacity: 1;
width: 100%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.snip1482 figcaption {
position: absolute;
width: 50%;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
padding: 20px 0 20px 20px;
}
.snip1482 h2,
.snip1482 p {
margin: 0;
width: 100%;
-webkit-transform: translateX(20px);
transform: translateX(20px);
opacity: 0;
}
.snip1482 h2 {
font-family: 'Playfair Display', Arial, sans-serif;
text-transform: uppercase;
margin-bottom: 5px;
}
.snip1482 p {
font-size: 0.8em;
}
.snip1482 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
.snip1482:hover img,
.snip1482.hover img {
width: 55%;
right: -10%;
}
.snip1482:hover figcaption h2,
.snip1482.hover figcaption h2,
.snip1482:hover figcaption p,
.snip1482.hover figcaption p {
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
</style>
В кодах, в строки отмеченные зелёным цветом вставьте путь к вашему изображению (адрес картинки).
Голубым цветом выделена строка, где нужно вставить адрес страницы, куда будет осуществлён переход по клику.
Розовый цвет это общий фон блока с изображением.
Вот такие не сложные основные настройки вашей карточки профиля.
Готовый код вставить в гаджет HTML/JavaScript и разместить его в нужном месте макета блога.
оформите подписку на новые шпаргалки
Согласен, очень интересная возможность.
ОтветитьУдалитьСаша, да , всё просто до безобразия.
УдалитьПросто, оно, конечно, просто, но не для всех.
ОтветитьУдалитьСемён, да я бы сделала Вам. Вот с установкой придётся самому.
УдалитьСпасибо, Виктория! Беру на заметку!
ОтветитьУдалитьИрина, бери и делай.
УдалитьСпасибо за интересные фишки!
ОтветитьУдалитьВика, пожалуйста . Попробуй сделать. У тебя блог яркий и профиль автора есть. Если не получиться что обращайся через форму связи выше. Помогу.
Удалитьспасибо!
ОтветитьУдалитьПожалуйста, Елена. Много вариантов . Вот вообще на всю страницу сделать можно http://www.shpargalochki.ru/2020/11/stilnyj-polnostranichnyj-blok-profilya-avtora.html
ОтветитьУдалитьо как прихольно стало содержание!Супер,привет Вика,столько всего вкусного появилось у тебя.
ОтветитьУдалитьInfodar, привет. Содержание пока пришлось такое поставить . В старое добавляла каждую статью сама. и немного запустила. Буду добавлять потихоньку -верну прежнюю страницу.
ОтветитьУдалитья уезжала,давно не заходила к тебе.Я когда вижу в почтовом ящике,что ШПАРГАЛОЧКИ что-то добавили,сразу забегаю,всегда интересно,что ж на этот раз новенького.Хоть я уже и давно на вордпрессе и ушла с блогспота,у меня масса твоего,мне удобнее через стили добавлять,чем ставить лишние плагины.Конструкторы разные конечно и что-то иногда или криво у меня становится,или не так смотрится как хотелось бы,но тем не менее,основная масса на моем новом сайте у меня это твоё.
УдалитьМонетка, очень приятно, что не зря эти мои шпаргалки. И самое важное, что их на практике применяют. А какой твой блог на ВП.
ОтветитьУдалитьвот этот,как и был на монетке,тема та же,только не все становится так как хотелось бы
Удалитьhttps://kopilka.site/
я вот очень хочу себе поставить 2 всплывающих баннера,недавно видимо у тебя появилось,мне как раз надо порекламировать акцию с моей работы,,вставляю,всплывают оба друг за другом,но полностью белые,только плагином могу сделать,а они ж сильно мешают загрузке,у меня и так напичкано всего.Либо какие-то стили у меня дерутся,либо может этот код не для вордпресса.И еще мне очень нрава ты как-то выкладывала поздравлялку с пасхой,тоже можно применить и как рекламу,и как поздравление-объявление,тоже не хочет.
ОтветитьУдалитьКонечно всё не впихнёшь. и не всё для ВП Шаблоны разные Я всё тестирую для стандартных блоггеровских.
ОтветитьУдалить