zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Color-Overlay bei :hover auf div

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2017, 15:47
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Frage Color-Overlay bei :hover auf div

Hallo allerseits,

ich habe den Eindruck ich sehe hier vor lauter Bäumen den Wald nicht.

Ich möchte bei einem div, das ein background-image hat einen farbigen overlay haben, welcher bei :hover verschwindet.

Jetzt ist es schon so weit, dass bei :hover das overlay erscheint, aber ich möchte es hier eigentlich andersherum haben.

Hier ist mein Code:
HTML-Code:
<div class="team text-center">
  <div class="cover" style="background:url('http://lorempixel.com/output/people-q-c-370-240-4.jpg'); background-size:cover;">
    <div class="overlay text-center">
      <h3 class="white">Title</h3>
      <h5 class="light light-white">Description here</h5>
    </div>
  </div>
</div>  
und CSS:
PHP-Code:
.team {
    
margin80px 0;
    
padding-bottom0px;
    
backgroundwhite;
    
box-shadow0 2px 3px rgba(0000.07);
}

.
team .cover .overlay {
    
height250px;
    
padding-top60px;
    
opacity0;
    
backgroundrgba(01682550.9);
    -
webkit-transitionopacity 0.45s ease;
    
transitionopacity 0.45s ease;
}

.
team:hover .cover .overlay {
    
opacity1;

Das ganze kann auch bei jsfiddle getestet werden.

Hoffe ich konnte es verständlich beschreiben. Würde mich über jede Hilfe sehr freuen.

LG
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2017, 16:58
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.777
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Zitat:
Jetzt ist es schon so weit, dass bei :hover das overlay erscheint, aber ich möchte es hier eigentlich andersherum haben.
Du musst nur die Werte bei opacity switchen

beim hover muss es 0 sein und bei der overlay klasse 1
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2017, 17:34
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.10.2008
Beiträge: 42
Mufasa befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von hemfrie Beitrag anzeigen
Du musst nur die Werte bei opacity switchen
Daaaanke! Na ich wusste doch ich sehe vor lauter Bäumen den Wald nicht
Mit Zitat antworten
Antwort

Stichwörter
css, div, farbe, hover, html, overlay

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:08 Uhr.