Пытаюсь через CSS сделать вид превью статьи-карточки, но не получается. Прошу прощения за неуместный знак вопроса в оглавлении. Собственно то, что я хочу получить должно выглядеть приблизительно как на этом изображении
, но выглядит как на другом изображении
. Собственно, суть в том, что мне нужно, чтобы текст описания статьи находился поверх картинки-превью, но выходит далеко не так. В дальнейшем я, после позиционирования, планировал регулировать, соответственно, видимость через :hover. Прилагаю код.
<html>
<head>
<title>POSTCARD</title>
</head>
<style>
body {
background-color: black;
}
.postcard {
width: 300px;
min-height: 280px;
background-color: #F3F3F3;
border-radius: 1rem;
box-shadow: 0 .3rem 1.2rem 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
position: relative;
margin: 12px;
display: flex;
flex-direction: column;
}
.postcard-up {
position: relative;
}
.postcard-up-category {
position: absolute;
top: auto;
z-index: 4;
}
.postcard-up-preview {
position: absolute;
z-index: 3;
}
.postcard-up-preview img{
width: 100%;
}
.postcard-up-text {
position: absolute;
z-index: 4;
}
.postcard-bottom {
position: relative;
}
.postcard-bottom-title {
position: absolute;
z-index: 4;
}
.postcard-bottom-author {
position: absolute;
z-index: 4;
}
.postcard-bottom-date {
position: absolute;
z-index: 4;
}
</style>
<body>
<div class="postcard">
<div class="postcard-up">
<div class="postcard-up-category">Медицина</div>
<div class="postcard-up-preview">
<img src="img/img.png" alt="">
</div>
<div class="postcard-up-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis dolore quia voluptate amet tempora laudantium delectus expedita, praesentium eveniet eum sequi assumenda obcaecati qui adipisci! Laboriosam perferendis cupiditate veritatis officiis?</div>
</div>
<div class="postcard-bottom">
<div class="postcard-bottom-title"><h1>Статья о медицине</h1></div>
<div class="postcard-bottom-author">Рафиль Ахметнабиев</div>
<div class="postcard-bottom-date">15.05.2020</div>
</div>
</div>
</body>
</html>
Простой
