[html]<style>
.image-grid {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-gap: 30px 30px;
margin: 0px auto;
justify-content: center;
}
.image-grid > div {
width: 150px;
height: 150px;
border-radius: 10px;
position: relative;
background-size: cover;
background-position: center;
}
.image-grid > div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: cover;
background-position: center;
border-radius: 10px;
z-index: 1;
backdrop-filter: blur(3px) grayscale(100%);
}
.image-grid > div.blur-image::before {
background-image: none;
filter: contrast(0.5);transition: filter 0.5s ease;
}
.image-grid > div.blur-image:hover::before {
background-image: inherit; filter:none; transition: filter 0.5s ease;
}
.image-grid > div wish {
position: absolute;
display:block;
word-break: break-word;
width: 150px;
height: 20px;
bottom: -5px;
left: 0;
padding: 20px 10px 0;
box-sizing: border-box;
color: #333;
font-size: 11px;
text-align: center;
letter-spacing: 1px;
}
theme.faces_need{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 44px 40px 20px;
}
.faces_need::after {
content: '';
background-image: url(https://forumstatic.ru/files/001c/a6/e3/94445.png);
width: 596px;
height: 173px;
top: 30px;
left: 195px;
pointer-events: none;
position: absolute;
z-index: 4;
}
theme_desc {
text-align: center;
padding: 20px 40px;
background: #ededed;
border-radius: 10px;
font-size: 10px;
color: #4c4c4c;
max-width: 440px;
}
.faces_need .image-grid::before {
content: '';
background-image: url(https://forumstatic.ru/files/001c/a5/43/32221.png);
width: 42px;
height: 9px;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
position: absolute;
z-index: 2;
}
.faces_need_h {margin-top:-30px;}
.image-grid > div::before {filter: contrast(1.2) grayscale(1);}
.image-grid > div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-image: linear-gradient(325deg, #af9b9b 7%, #5c84a4 90%);
opacity: 0.475;
z-index: 4;
border-radius: 10px;
}
</style>
<theme class="faces_need"><span class="faces_need_h"><b>акция</b>
c 20.03 по 01.04</span>
<theme_desc>при взятии внешности из списка ниже после принятой анкеты вы получаете:<br>• 1000$ на счет; <br>• полная оформа профиля (плашка, хэдер, иконка) в магазине бесплатно; <br> • буст на удвоенный банк на все на 2 недели; <br>• любовь и восхищение ♥
</theme_desc>
<div class="image-grid">
<div style="background-image: url(https://64.media.tumblr.com/cc33df70280 … 1e0edd.gif)"><wish>pedro pascal</wish></div>
<div style="background-image: url(https://64.media.tumblr.com/1021762110b … 12a094.gif)"><wish>olivia cooke</wish></div>
<div style="background-image: url(https://64.media.tumblr.com/e65f9532a4c … c9e6d3.gif)"><wish>boyd holbrook</wish></div>
<div style="background-image: url(https://64.media.tumblr.com/d7942ed05de … cc75b2.gif)"><wish>dakota johnson</wish></div>
<div style="background-image: url(https://64.media.tumblr.com/ec436fb4e06 … d7852a.gif)"><wish>jack o'connell</wish></div>
<div style="background-image: url(https://64.media.tumblr.com/15b09b69038 … a53445.gif)"><wish>eiza gonzález</wish></div>
</div>
</theme>
[/html][hideprofile]
[html]<style>
.image-grid {
display: grid;
grid-template-columns: repeat(3, 150px);
grid-gap: 30px 30px;
margin: 0px auto;
justify-content: center;
}
.image-grid > div {
width: 150px;
height: 150px;
border-radius: 10px;
position: relative;
background-size: cover;
background-position: center;
}
.image-grid > div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: inherit;
background-size: cover;
background-position: center;
border-radius: 10px;
z-index: 1;
backdrop-filter: blur(3px) grayscale(100%);
}
.image-grid > div.blur-image::before {
background-image: none;
filter: contrast(0.5);transition: filter 0.5s ease;
}
.image-grid > div.blur-image:hover::before {
background-image: inherit; filter:none; transition: filter 0.5s ease;
}
.image-grid > div wish {
position: absolute;
display:block;
word-break: break-word;
width: 150px;
height: 20px;
bottom: -5px;
left: 0;
padding: 20px 10px 0;
box-sizing: border-box;
color: #333;
font-size: 11px;
text-align: center;
letter-spacing: 1px;
}
theme.faces_need{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 44px 40px 20px;
}
.faces_need::after {
content: '';
background-image: url(https://forumstatic.ru/files/001c/a6/e3/94445.png);
width: 596px;
height: 173px;
top: 30px;
left: 195px;
pointer-events: none;
position: absolute;
z-index: 5;
}
theme_desc {
text-align: center;
padding: 20px 40px;
background: #ededed;
border-radius: 10px;
font-size: 10px;
color: #4c4c4c;
max-width: 440px;
}
.faces_need .image-grid::before {
content: '';
background-image: url(https://forumstatic.ru/files/001c/a5/43/32221.png);
width: 42px;
height: 9px;
left: 50%;
transform: translateX(-50%);
bottom: 0px;
position: absolute;
z-index: 2;
}
.faces_need_h {margin-top:-30px;}
.image-grid > div::before {filter: contrast(1.2) grayscale(1);}
.image-grid > div::after {
content: "";
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
background-image: linear-gradient(325deg, #af9b9b 7%, #5c84a4 90%);
opacity: 0.475;
z-index: 4;
border-radius: 10px;
}
</style>[/html]
