Код:
<!--HTML-->
<style>.charcater {
width: 150px;
height: 150px;
position: relative;
border: 4px solid #9e2f2d;
overflow: hidden;
display: inline-block;
margin: 10px 10px
}
.charcater img {
width: 150px;
filter: grayscale(100%)
}
.charimg {
width: 150px;
height: 150px;
position: relative;
}
.charimg:after{
content: "";
background: #8e6883;
width: 150px;
height: 150px;
display: block;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
}
.charcterinfo {
background: #9e2f2d;
clip-path: polygon(50% 0%, 100% 20%, 100% 100%, 0 100%, 0 20%);
position: absolute;
width: 150px;
bottom: 0;
left: 0;
padding-top: 18px;
color: #f2f2f2;
text-align: center;
padding-bottom: 9px;
transition: all .6s cubic-bezier(.64,.51,.55,1.16) 0s;
}
.charname {
font: 700 11px roboto;
text-transform: uppercase;
position: relative;
padding-bottom: 0px
}
charrace {
display: block;
font: 500 8px montserrat;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 5px
}
.charinfotwo {
font: 500 9px montserrat;
text-align: justify;
padding: 10px;
line-height: 160%;
background: #f2f2f2;
height: 130px;
transition: all .6s cubic-bezier(.64,.51,.55,1.16) 0s;
}
.charinfotwo > div {
height: 130px;
overflow-y: auto;
padding-right: 5px
}
.charcater:hover .charcterinfo {
bottom: 100%;
clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 0 100%, 0 100%);
}
.charcater:hover .charinfotwo {
transform: translateY(-150px)
}
</style>Код:
<!--HTML--> <div style="margin: auto;text-align: center"> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> <div class="charcater"><div class="charimg"> <img src="https://forumstatic.ru/files/001a/c9/58/21240.png"> </div><div class="charcterinfo"><div class="charname"> charles blackwood </div><charrace> human </charrace></div><div class="charinfotwo"><div> Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время. </div></div></div> </div>
