��

mybb@mybb.ru (Howard Phillips) — Wed, 01 Jul 2020 14:12:48 +0300

[html]<style>
.templateShadowCard{
position: relative;
width: 260px;
margin: 0 auto;
border: 10px solid black;
font-family: verdana, arial, helvetica, sans-serif;
box-sizing: border-box;
}
.templateShadowCard .card{
position: absolute;
top:0;
left:0;
z-index:2;
text-align: center;
}

.templateShadowCard .card img{
width:100%;
}

.templateShadowCard .card:hover{
opacity:0;
}

.transition {
transition: 2s;
}

.templateShadowCard .textBlock{
display: block;
position: relative;
width:100%;
height: 100%;
z-index:1;
color:white;
box-sizing: border-box;
padding: 4px;
background-color: black;
text-align: justify;
padding: 25% 4px;
box-sizing: border-box;
}
.templateShadowCard .textBlock .caption{
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
</style>

<div class="templateShadowCard">
<div class="card transition">
<img src="https://i.imgur.com/rh8JN2A.png">
</div>
<div class="textBlock">
<div class="caption">�� 1</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut eros a ligula ornare pretium a in lacus. Mauris eleifend ante molestie vestibulum bibendum. Ut iaculis sodales rhoncus. In at leo enim. Mauris eu arcu et orci feugiat blandit. Nunc ac consequat risus. Vivamus malesuada quam nulla, in luctus felis sagittis at. Maecenas sed leo laoreet, mattis eros eu, dapibus eros. Donec rhoncus mi risus, non porta erat commodo non. Etiam vitae molestie neque, luctus porta sem. Nullam rutrum nisi at enim blandit molestie.
</div>
</div>
<script>
$(document).ready(function(){
var img = new Image(); // ��
img.src =$(".templateShadowCard .card img").attr('src');
//$('body').append(img.src);
img.onload=function(){
//$('body').append(img.height);
//img.height
var h=$(".templateShadowCard .card img").height();
$('.templateShadowCard .textBlock').css('height', h+'px');
}

});
</script>

[/html]

�������

�������� ���������

��

��