Есть блок. В нём картинка задана
background. Далее блок, который срабатывает при наведении мышки (
hover-block). В этом блоке есть ссылка с текстом (
h1,
span). Для
hover-block изначально указан
opacity: 0. При наведении
opacity: 0.9. Но и всё содержимое блока тоже с такой прозрачностью. А я хочу, чтобы текст внутри блока
hover-block был
opacity: 1 при этом эффект
hover с
opacity: 0.9. Я игрался долго с этими блоками, менял местами, ничего не получилось. Как добиться этого результата?
HTML:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="footer">
<div class="slider slider-1">
<div class="slide">
<div class="img-1">
<div class="hover-block">
<a href="#">
<h1>Apex Magazine<br>June Issue</h1>
<span>by Fabrizio Morra</span>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
CSS:body {
margin: 0;
}
body main .footer {
width: 440px;
height: 400px;
}
body main .footer .slider .slide {
margin-left: 27px;
box-sizing: border-box;
outline: none;
}
body main .footer .slide.slick-slide {
cursor: pointer;
}
body main .footer .slide .img-1 {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block {
background: #1bf1ad;
display: flex;
justify-content: flex-start;
align-items: flex-end;
opacity: 0;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block:hover {
opacity: 0.9;
transition: all 0.3s ease-in;
}
body main .footer .slide .img-1 .hover-block a {
color: #ffffff;
text-decoration: none;
padding: 0 30px 30px 50px;
outline: none;
}
body main .footer .slide .img-1 .hover-block a h1 {
font-family: "Times New Roman", sans-serif;
font-size: 28px;
letter-spacing: 3px;
line-height: 0.9;
text-transform: uppercase;
margin-bottom: 10px;
}
body main .footer .slide .img-1 .hover-block a span {
font-family: "Times New Roman", sans-serif;
font-size: 12px;
letter-spacing: 1.4px;
text-transform: uppercase;
}
body main .footer .slide .img-1 {
background: url("img/sl1.jpg") no-repeat;
background-size: cover;
}
body main .footer .slide .img-1 .hover-block {
width: 440px;
height: 400px;
}
И попутный вопрос, Как реализовать данный эффект без использования
background в CSS, а только в HTML через
img src="" alt=""?
Простой
Средний