[html]
<style type="text/css">
.buttons {
display: -webkit-flex;
display: -ms-flexbox;
display: flex; -webkit-align-items: flex-start; -ms-flex-align: start;
align-items: flex-start; -webkit-justify-content: space-between; -ms-flex-pack: justify;
justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.butFrame{
width: calc(25% - 10px);
}
.butFrame * {
box-sizing: border-box;
}
.butFrame * {
transition: all .5s ease;
}
.butFrame {
position: relative;
overflow: hidden;
margin: 5px;
background: #111;
font-family: 'Times New Roman';
font-size: 1em;
text-align: center;
background-size: cover !important;
background-repeat: no-repeat !important;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
background-position: center!important;
background-size: cover!important;
padding-bottom: 360px;
}
.butFrame:before{
position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
content:"";
background: #111;
opacity: .2
}
.buttons > .butHeading {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.butFrame .butTextWrap {
font-family: inherit;
padding: 2em;
color: #fff;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.butFrame .butTextWrap::before{
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.butFrame .butTextWrap::after {
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.butFrame .butTextWrap,
.butFrame .butTextWrap > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
.butFrame .butTextWrap > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.butFrame .butHeading {
word-spacing: -0.15em;
font-weight: 800;
font-size: 18px;
font-family: 'Times New Roman';
}
.butFrame .butHeading .butText {
font-weight: 300;
}
.butFrame .butHeading,
.butFrame p {
margin: 0;
color: #FFF;
}
.butFrame p {
letter-spacing: 1px;
font-size: 68.5%;
font-family: 'Times New Roman';
}
/* EFFECT */
.butFrame .butTextWrap::before,
.butFrame .butTextWrap::after {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
.butFrame .butTextWrap::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
.butFrame .butTextWrap::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
box-sizing: border-box;
}
.butFrame .butHeading {
padding-top: 10%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
.butFrame p {
padding: 10px 0;
opacity: 0;
-webkit-transition: opacity 0.25s, -webkit-transform 0.25s;
transition: opacity 0.25s, transform 0.25s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
/* HOVER STYLES */
.butFrame:hover:before{
opacity:.6;
}
.butFrame:hover .butTextWrap::before,
.butFrame:hover .butTextWrap::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.butFrame:hover .butHeading,
.butFrame:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
</style>
<div class="buttons">
<a class="butFrame col-4 col-2-med col-1-small" style="background:url(https://forumupload.ru/uploads/0018/28/ … 829056.png); width: 640px;">
<div class="butTextWrap" style="vertical-align: middle">
<br />
<br />
<br />
<br />
<br />
<p><span style="font-size:22px" style="top: 50%;">11.06.1204 ВЕЧЕР ОТКРОВЕНИЙ</span><br /></p>
<p><span style="font-size:16px">Участники:<br />
Lydia Richter и Adrian Belfore</span></p>
<p><span style="font-size:16px">Это был поздний вечер после совершеннолетия сестры Адриана. Казалось, этот день несет лишь радость. Ни Лидия, ни Адриан никак не надеялись узнать друг о друге намного больше, чем за полтора месяца до этого... Во истину это станет их вечером откровений. </span></p>
</div>
</a>
</div>
[/html]
Отредактировано Lydia Richter (2020-10-09 16:50:47)