[html]<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="card">
<div class="imgBox" >
<div class="bark" ></div>
<img style= position:absolute; margin-top:-300px; src="https://parafraz.space/wp-content/uploads/2021/12/imgonline-com-ua-resize-05nib6nvccy4n.jpg">
</div>
<div class="details">
<p class="color1">Милая птичка </p><br><br>
<p class="color2 margin">Ты украшение форумной качалки</p><br><br><br><br>
<p>Все в природе бодибилдинг:</p><br>
<p>Что ни мышца — то сугроб,</p><br>
<p>Вон, напротив, снежный бицепс,</p><br>
<p>Хоть кого зароет в гроб.</p><br>
<p class="text-right">♥</p>
</div>
</div>
<style>
body {
font-family: 'Impact', cursive !important;
background: #FDE3A7;
margin-left: 400px;
padding: 0px;
}
::selection {
background: transparent;
}
h4 {
line-height: 1px;
font-family: 'Amatic SC', cursive !important;
}
.color1{color:maroon}
.color2{color:maroon}
.card {
color: #013243;
top: 50%;
margin-left: 400px;
width: 400px;
height: 350px;
background: #e0e1dc;
transform-style: preserve-3d;
transform: translate(-50%,-50%) perspective(2000px);
box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);
transition: 1s;
}
.card:hover {
transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);
box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);
}
.card:before {
content:'';
position: absolute;
top: -5px;
left: 0;
width: 100%;
height: 5px;
background: #BAC1BA;
transform-origin: bottom;
transform: skewX(-45deg);
}
.card:after {
content: '';
position: absolute;
top: 0;
right: -5px;
width: 5px;
height: 100%;
background: #92A29C;
transform-origin: left;
transform: skewY(-45deg);
}
.card .imgBox {
width: 100%;
height: 100%;
position: relative;
transform-origin: left;
transition: .7s;
}
.card .bark {
position: absolute;
background: #e0e1dc;
width: 100%;
height: 100%;
opacity: 0;
transition: .7s;
}
.card .imgBox img {
min-width: 250px;
max-height: 400px;
}
.card:hover .imgBox {
transform: rotateY(-135deg);
}
.card:hover .bark {
opacity: 1;
transition: .6s;
box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;
}
.card .details {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
padding: 0 0 0 10px;
z-index: -1;
margin-top: 70px;
}
.card .details p {
font-size: 15px;
line-height: 5px;
transform: rotate(-10deg);
padding: 0 0 0 20px;
}
.card .details h4 {
text-align: center;
}
.text-right {
text-align: right;
}
</style>
[/html]