Итак, я застрял .. Я пытался выяснить, что не так с моим кодом. Я пытаюсь заставить мое изображение немного потемнеть, когда наведу на него курсор. Я делаю это в CSS. Это работает НО это покрывает только половину моего изображения. Когда мой текст добавлен, он будет показывать только функцию наведения под моим текстом, а когда я удаляю текст, он будет показывать только 1/3 изображения сверху.
Я нуб, и, надеюсь, это легко исправить для кого-то там!
Мой html:
<div class="contentbild1">
<picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="Biler/bildtestmobil.jpg" alt="Trädvård" style="width:100%;"></picture>
<div class="contentbildtext1">
<font class="Contenttext">TRÄDVÅRD</font>
</div>
</div>
и мой CSS:
.contentbild1{
position: relative;
}
.contentbild1:hover > div {
background-color:rgba(0, 0, 0, 0.3);
transition: all 1s ease;
}
.contentbildtext1{
position: absolute;
top:0%;
left:0%;
width:100%;
padding-top:5.8%;
text-align:center;
font-family:Palatino,Palatino Linotype,Palatino LT STD,Book Antiqua,Georgia,serif;
color:orange;
font-size:200%;
font-weight: bold;
text-decoration:none;
}
@media screen and (max-width: 736px){
.contentbildtext1{
padding-top:17%;
}
}
Честно говоря, я не очень много знаю, в основном я ищу то, что хочу, и нахожу код или функции, которые мне нужны. Эта проблема за мной. Может быть, это из-за того, что мой код беспорядок (?).
Мне также было трудно расположить текст в центре, возможно, это видно в коде, теперь все работает нормально.
Благодарю за помощь!