Erhöhen transparenten hintergrund Deckkraft auf hover?

Ich würde gerne für mein hintergrund Bild zu erhöhen, von .1 "Deckkraft" .5 die Deckkraft, wenn ein Benutzer mit der Maus über meine div.

HTML

<div id="list">
    <div class="line_one">om nom nom nom...</div>
    <div class="line_two">18 foods to make you incredibly hungry</div>
</div>

CSS 

#list {
  display:block;
  position: relative; 
  -webkit-transition: all 1s ease; 
  -moz-transition: all 1s ease; 
  -o-transition: all 1s ease; 
  -ms-transition: all 1s ease; 
  transition: all 1s ease;
}

#list::after {
  content: "";
  background: url('test.jpg');
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

Muss es eine Möglichkeit dies zu tun, ohne Javascript. Irgendwelche Ideen?

  • Bitte achten Sie auf die Echtzeit-Vorschau beim posten 😉
  • Dang, habe es, bevor ich hatte eine chance, es zu beheben. In der Zukunft tun werden.
  • Auch ein Hinweis, dass ich wünschte, mehr Leute wusste XD Beim buchen von einem block von CSS, legte <!-- language: lang-css --> (mit, der genaue Abstand) auf einer Zeile vor dem code-block, dies wird es ermöglichen, die richtige syntax-highlighting.
  • Ahh, gut zu wissen. Nicht sehen, dass in der Anleitung irgendwo. Tun die nächste Zeit.
InformationsquelleAutor user1787531 | 2014-01-29
  1. 8

    Gibt es natürlich.

    #list::after {
    transition: opacity 1s ease;
}
#list:hover::after {
    opacity: 0.5;
}
    • Perfekt! Ich wusste gar nicht, dass der ::nach Bedarf nach zu gehen :hover nicht vor. Das war das problem in meinem Fall. Ich nehme an diese Antwort, wenn Sie ALSO lassen Sie mich in 10 Minuten.
    • Vergessen Sie nicht, kreuzen Sie das Häkchen bei der Abstimmung Pfeile, erhalten Sie Punkte und so funktioniert er.
    • Es ist zu schnell - die Frage ist 15 Minuten alt ist 😉
    InformationsquelleAutor Niet the Dark Absol
Schreibe einen Kommentar