Эффект наведения, устанавливающий непрозрачность текста, а также
Я пытаюсь скрыть текст, и когда вы наводите курсор на элемент, непрозрачность становится равной 0,5, и появляется текст. Однако, похоже, происходит то, что для текста также устанавливается непрозрачность 0,5.
Я использую реакцию, если вам интересно узнать о синтаксисе.
<div
className = "course_grid-item"
style = {{ backgroundImage: `url(${bgImg4})` }}
>
<div className = "grid_course-name">
<h5>Title</h5>
</div>
</div>
.course_grid-item {
transition: all 0.3s ease;
background: white;
padding: 2rem;
margin: 5px;
border-radius: 5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.course_grid-item:hover {
opacity: 0.5;
}
.grid_course-name {
opacity: 0;
}
.course_grid-item:hover .grid_course-name {
opacity: 1;
transition: all 0.3s;
}
Ответы 1
Это потому, что course_grid-item является родителем grid_course-name.
Любой фильтр, примененный к родителю, влияет на дочерний элемент:
.course_grid-item {
transition: all 0.3s ease;
background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
padding: 2rem;
margin: 5px;
border-radius: 5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.course_grid-item:hover {
opacity: 0.5;
}
.grid_course-name {
opacity: 0;
}
.course_grid-item:hover .grid_course-name {
opacity: 1;
transition: all 0.3s;
}<div class = "course_grid-item">
<div class = "grid_course-name">
<h5>Title</h5>
</div>
</div>Вместо этого вы можете установить фоновое изображение на ::before:
.course_grid-item {
position: relative;
background: white;
height: 200px;
width: calc(100vw - 6rem);
padding: 2rem;
margin: 5px auto;
border-radius: 5px;
overflow: hidden;
}
.course_grid-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transition: all 0.3s ease;
}
.course_grid-item:hover::before {
opacity: 0.5;
}
.grid_course-name {
position: relative;
opacity: 0;
}
.course_grid-item:hover .grid_course-name {
opacity: 1;
transition: all 0.3s;
}<div class = "course_grid-item">
<div class = "grid_course-name">
<h5>Title</h5>
</div>
</div>Или сделайте изображение отдельным:
.course_grid-item {
position: relative;
width: calc(100vw - (4rem + 10px));
margin: 4px auto;
}
.grid_course-background {
position: absolute;
width: 100%;
height: 200px;
transition: all 0.3s ease;
background: url("https://cdn.static-economist.com/sites/default/files/images/print-edition/20170722_STP001_0.jpg");
border-radius: 5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.course_grid-item:hover .grid_course-background {
opacity: 0.5;
}
.grid_course-name {
position: relative;
opacity: 0;
}
.course_grid-item:hover .grid_course-name {
opacity: 1;
transition: all 0.3s;
}<div class = "course_grid-item">
<div class = "grid_course-background"></div>
<div class = "grid_course-name">
<h5>Title</h5>
</div>
</div>@Waterfall заключает текст в общий тег <span> и применяет правила CSS к этому элементу тега span.
Мне нравится ваш последний пример с отдельным изображением. Просто вопрос, можно ли использовать фоновое изображение или лучше использовать изображение в теге <img>?
@Daniel_Knights, я только что понял, что в ваших примерах текст фактически меняет непрозрачность после того, как изображение
Изображение тоже подойдет. Не уверен, почему он это делает, думаю, это просто причуда браузера.
position: relative вроде исправили
Хм, я хочу использовать ваш третий пример, но я не думаю, что он работает. Текст также, кажется, имеет непрозрачность менее 1
Попробуйте установить его на position: relative, у меня работает в обоих примерах
@Daniel_Knights, ах да. Ты прав. Осталась только одна проблема, и это то, что если вы наведете курсор на сам текст, наложение изображения исчезнет.
Я думаю, что исправил это, сделав это .course_grid-item:hover .grid_course-background { opacity: 0.5; }
О да, добавил это в свой фрагмент
Как мне преодолеть это тогда, потому что мне нужен текст внутри элемента?