XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Color-Overlay bei :hover auf div (http://xhtmlforum.de/showthread.php?t=73215)

Mufasa 22.04.2017 14:47

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

hemfrie 22.04.2017 15:58

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

Mufasa 22.04.2017 16:34

Zitat:

Zitat von hemfrie (Beitrag 550830)
Du musst nur die Werte bei opacity switchen :)

Daaaanke! Na ich wusste doch ich sehe vor lauter Bäumen den Wald nicht :lol::p:roll:


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:45 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022