#html #css
Вопрос:
Я пытаюсь выполнить следующее:
- Иметь изображение в оттенках серого
- Поместите текст и кнопку поверх изображения в оттенках серого
- Включите эффект наведения на изображение в оттенках серого, чтобы оно окрашивалось при наведении
Проблема, с которой я сталкиваюсь, заключается в том, что при наведении курсора мыши на текст/кнопку div с абсолютным расположением в верхней части изображения эффект наведения больше не работает.
Вот пример:
Вот мой HTML и CSS:
<div id="homepage-solutions">
<div class="image-box">
<img src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg">
<div class="text-box">
<h3>Metalworking</h3>
<a href="comingsoon" class="btn">Learn More</a>
</div>
</div>
</div>
#homepage-solutions .image-box {
display: inline-block;
position: relative;
overflow: hidden;
min-width: 250px;
min-height: 250px;
max-width: 100%;
max-height: 100%;
text-align: center;
list-style: none;
vertical-align: middle;
}
#homepage-solutions .image-box img {
display: block;
height: 200px;
width: 100%;
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#homepage-solutions .image-box img:hover {
-webkit-filter: grayscale(0);
filter: none;
}
#homepage-solutions .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
text-align: center;
max-width: 500px;
}
#homepage-solutions h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
#homepage-solutions .text-box p {
color: #fff;
font-size: 12px;
font-weight: 400;
margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
display: inline-block;
width: auto;
color: #fff;
background: #fd5f11;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
padding: 6px 20px;
margin: 5px 0 0;
border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
opacity: 0.75;
}
Ссылки на скрипку:
https://jsfiddle.net/mwilk/96p7nkw1/5/ https://jsfiddle.net/mwilk/96p7nkw1/6/#amp;togetherjs=H2kAkloCwG
Спасибо!
Ответ №1:
Привет,
Просто Отредактируйте Селектор:
#homepage-solutions .image-box img:hover
Для
#homepage-solutions .image-box:hover img
Видите, как Это работает
#homepage-solutions .image-box {
display: inline-block;
position: relative;
overflow: hidden;
min-width: 250px;
min-height: 250px;
max-width: 100%;
max-height: 100%;
text-align: center;
list-style: none;
vertical-align: middle;
}
#homepage-solutions .image-box img {
display: block;
height: 200px;
width: 100%;
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
#homepage-solutions .image-box:hover img {
-webkit-filter: grayscale(0);
filter: none;
}
#homepage-solutions .text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2em;
text-align: center;
max-width: 500px;
}
#homepage-solutions h3 {
color: #fff;
font-size: 22px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px;
text-align: center;
}
#homepage-solutions .text-box p {
color: #fff;
font-size: 12px;
font-weight: 400;
margin: 10px 0;
}
#homepage-solutions .text-box a.btn {
display: inline-block;
width: auto;
color: #fff;
background: #fd5f11;
font-size: 13px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
padding: 6px 20px;
margin: 5px 0 0;
border-radius: 0;
}
#homepage-solutions .text-box a.btn:hover {
opacity: 0.75;
}
<div id="homepage-solutions">
<div class="image-box">
<img
src="https://azbigmedia.com/wp-content/uploads/2019/11/metalworking.jpg"
/>
<div class="text-box">
<h3>Metalworking</h3>
<a href="comingsoon" class="btn">Learn More</a>
</div>
</div>
</div>
Комментарии:
1. о мой…. Да, это было бы неплохо. Вау. Спасибо!