<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
h3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.8rem;
line-height: 0%;
color: #FCD7BB;
}
.main {
max-width: 720px;
margin: 60px auto 0px;
}
.blok {
position: relative;
max-width: 640px;
display: grid;
grid-template-columns: 240px minmax(120px, 400px);
grid-template-rows: 60px 120px;
grid-template-areas:
"kartinka_blok zagolovok_blok"
"kartinka_blok opisanie_blok";
grid-gap: 0px 20px;
cursor: pointer;
}
.kartinka_blok {
grid-area: kartinka_blok;
}
.zagolovok_blok {
grid-area: zagolovok_blok;
}
.opisanie_blok {
grid-area: opisanie_blok;
}
.dalee_blok {
grid-area: dalee_blok;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .6);
opacity: 0;
transition: all .4s;
}
.dalee_tekst {
display: block;
text-align: center;
color: #AC5959;
text-decoration: underline;
padding: 90px 0px 0px 0px;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="blok">
<div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
<div class="zagolovok_blok">
<h3>Полигональный арт</h3>
</div>
<div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
себя во всей красе.</div>
<div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
</div>
<div class="blok">
<div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
<div class="zagolovok_blok">
<h3>Полигональный ар2т</h3>
</div>
<div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
себя во всей красе.</div>
<div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
</div>
<script>
"use_strict"
document.querySelectorAll(".blok").forEach(b => {
b.addEventListener("mouseenter", function () {
b.querySelector('.dalee_blok').style.opacity = 1
})
b.addEventListener("mouseleave", function () {
b.querySelector('.dalee_blok').style.opacity = 0
})
});
</script>
</body>
</html>
или без js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
h3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.8rem;
line-height: 0%;
color: #FCD7BB;
}
.main {
max-width: 720px;
margin: 60px auto 0px;
}
.blok {
position: relative;
max-width: 640px;
display: grid;
grid-template-columns: 240px minmax(120px, 400px);
grid-template-rows: 60px 120px;
grid-template-areas:
"kartinka_blok zagolovok_blok"
"kartinka_blok opisanie_blok";
grid-gap: 0px 20px;
cursor: pointer;
}
.kartinka_blok {
grid-area: kartinka_blok;
}
.zagolovok_blok {
grid-area: zagolovok_blok;
}
.opisanie_blok {
grid-area: opisanie_blok;
}
.dalee_blok {
grid-area: dalee_blok;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .6);
opacity: 0;
transition: all .4s;
}
.dalee_tekst {
display: block;
text-align: center;
color: #AC5959;
text-decoration: underline;
padding: 90px 0px 0px 0px;
font-size: 2rem;
}
.dalee_blok {
opacity: 0;
}
.blok:hover .dalee_blok {
opacity: 1;
}
</style>
</head>
<body>
<div class="blok">
<div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
<div class="zagolovok_blok">
<h3>Полигональный арт</h3>
</div>
<div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
себя во всей красе.</div>
<div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
</div>
<div class="blok">
<div class="kartinka_blok"><img src="https://rakipov.ru/files/1.jpg" width="100%" alt=""></div>
<div class="zagolovok_blok">
<h3>Полигональный ар2т</h3>
</div>
<div class="opisanie_blok">Сегодня Polygonal арт часто выглядит как стилизация для логотипов, фона и иллюстраций,
которые обычно служат в качестве украшений, а не как привлекающий внимание элемент. Но именно здесь он показывает
себя во всей красе.</div>
<div class="dalee_blok"><span class="dalee_tekst">Читать далее</span></div>
</div>
<script>
"use_strict"
// document.querySelectorAll(".blok").forEach(b => {
// b.addEventListener("mouseenter", function () {
// b.querySelector('.dalee_blok').style.opacity = 1
// })
// b.addEventListener("mouseleave", function () {
// b.querySelector('.dalee_blok').style.opacity = 0
// })
// });
</script>
</body>
</html>