<!--HTML--> <div class="cf0box"><div class="cf0_pic"><img src="https://b.radikal.ru/b03/2010/21/97affa75dfe1.gif"></div> <div class="cf0_title">hover <div class="cf0_subtitle">here</div></div> <div class="cf0_txt"><div>Что здесь можно будет увидеть? Графику различного характера: от подборок гифов до аватаров и титулов в эпизоды. Могут появляться и html-формы под какую-нибудь информацию. <br> <br>welcome</div></div></div> <style> .cf0box { width: 440px; height: 200px; background-color: rgba(138, 138, 138,0.1); border-radius: 1%; overflow: hidden; position: relative; display: block; margin: auto } .cf0_pic { width: 220px; height: 220px; text-align: center; margin: 10px 10px; transition: all 0.7s ease-in-out 0s } .cf0_pic img {border-radius: 50%;} .cf0_title { width: 50px; position: absolute; text-align: center; margin-top:-150px; font-family: Century Gothic; font-size: 12px; font-weight: 400; margin-left: 95px; color: #b5b5b5; text-shadow: 1px 1px 1px #000; text-transform: lowercase; transition: all 0.7s ease-in-out 0s; height: 60px } .cf0_subtitle { box-shadow: 0 -1px 0 0 #999; transition: all 0.3s ease-in-out 0s; padding-top: 2px; margin-top: 2px } .cf0_txt { width: 180px; height: 180px; border-radius: 50%; text-align: center; margin-top: -230px; position: absolute; background-color: rgba(255,255,255,0.5); line-height: 11px; opacity: 0; transition: all 0.7s ease-in-out 0s; } .cf0_txt div { overflow-y: auto; text-align: center; font-family: Century Gothic; font-size: 12px; margin: 30px 20px; height: 120px; } .cf0_txt div::-webkit-scrollbar { width: 1px; height: 1px; background-color: transparent; } .cf0_txt div::-webkit-scrollbar-thumb { width: 3px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset; scroll-behavior: smooth; } .cf0box:hover .cf0_pic { filter: grayscale(50%) } .cf0box:hover .cf0_txt { margin-left: 225px; opacity: 1 } .cf0box:hover .cf0_title { opacity: 0 } </style>
frozen
Сообщений 1 страница 4 из 4
Поделиться12020-10-31 13:17:45
Поделиться22020-10-31 13:44:09
episode
storm's coming | |||
Поделиться32020-11-25 17:02:05
владивосток
утро субботы 21.11вид из окна
зеркалка
фото без доп.обработки, только уменьшены в фш
Поделиться42021-01-31 15:10:56
немного ностальгии по одной из альт.вселенных + html-форма
[html]<div class="ts12box">
<div class="ts12_pic"><img src="https://s8.hostingkartinok.com/uploads/images/2021/01/c06f7b389c0385f22d43afbe2e670807.png"></div>
<div class="ts12_txt">
<div>
Мы пережили не одно падение завесы между мирами, и сейчас стоим на пороге новой катастрофы, потому что люди снова дорвались до могущества и осквернили источник магической энергии, который питает наш мир.
<br><br>Полчища демонов уничтожат на своём пути всё живое и неживое. Города превратятся в мертвые руины. Края плодородия и изобилия станут гиблыми пустошами. Всюду будут царить страх, боль и голод. Солнце на века скроется за пеленой вечного сумрака. Люди в отчаянии взмолятся богам, которые давно ими же умерщвлены. Магия покинет проклятый мир, и некогда самая могущественная из всех населяющих эти земли рас окажется бессильна противостоять ордам чудовищ. Это конец… и начало для нового мира. Вернутся перед зарей те, кто некогда был забыт.
<br><br>Грядет третье падение завесы между мирами.
<br>Отсчет начат.
<br>Мы обязательно выстоим и теперь.
</div>
</div></div>
<style>
.ts12box {
width: 500px;
height: 350px;
overflow: hidden;
position: relative;
display: block;
margin: auto;
border-radius: 1%;
}
.ts12_pic {
width: 500px;
height: 350px;
text-align: center;
filter: grayscale(40%) blur(1px);
transition: all 0.7s ease-in-out 0s
}
.ts12_txt {
width: 230px;
height: 330px;
text-align: justify;
position: absolute;
background-color: rgba(255,255,255,0.3);
border-radius: 1%;
margin-left: 260px;
transition: all 0.7s ease-in-out 0s;
margin-top: -340px;
}
.ts12_txt div {
overflow-y: auto;
padding-right: 3px;
margin: 20px 20px;
height: 290px
}
.ts12_txt div::-webkit-scrollbar {
width: 3px;
height:3px;
background-color: transparent;
}
.ts12_txt div::-webkit-scrollbar-thumb {
background-color:#333;
width:3px !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255,0.1) inset;
scroll-behavior: smooth;
}
.ts12box:hover .ts12_pic {
filter: grayscale(40%) blur(0px);
}
</style>[/html]