My: hover in CSS повлияет только на кусочек моего div / изображения - PullRequest
Новая
       38

My: hover in CSS повлияет только на кусочек моего div / изображения

0 голосов
/ 30 января 2020

Итак, я застрял .. Я пытался выяснить, что не так с моим кодом. Я пытаюсь заставить мое изображение немного потемнеть, когда наведу на него курсор. Я делаю это в 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%;  
    }
}

Честно говоря, я не очень много знаю, в основном я ищу то, что хочу, и нахожу код или функции, которые мне нужны. Эта проблема за мной. Может быть, это из-за того, что мой код беспорядок (?).

Мне также было трудно расположить текст в центре, возможно, это видно в коде, теперь все работает нормально.

Благодарю за помощь!

Ответы [ 2 ]

1 голос
/ 30 января 2020

Проверьте добавьте 'bottom: 0;' в .contentbildtext1 css класс. 

  .contentbildtext1{    
    position: absolute;
    top: 0%;
    bottom: 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;
}
1 голос
/ 30 января 2020

Вам нужно сделать .contentbild1 черным не только .contentbild1 > div: 

.contentbild1{
  position: relative;
}
.contentbild1:hover {
    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%;  
    }
}
<div class="contentbild1">
    <picture><source media="(min-width: 736px)" srcset="Biler/bildtest.jpg" style="width:100%;"><img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Trädvård" style="width:100%;"></picture>
    <div class="contentbildtext1">
    <font class="Contenttext">TRÄDVÅRD</font>
    </div>
</div>
...