Hi,
ich würde gerne ein Hover Overlay gestalten, ungefähr so wie bei dieser Seite: http://www.davidundgoliath.com/agentur
Ich hab bis jetzt folgenden Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style type="text/css">
.fade {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
float: left;
}
.fade:hover, .fade:focus, .fade:active {
background-color: #232323;
color: white;
}
</style>
</head>
<body>
<div class="fade">
<img src="mockup1.jpg" width="400" height="300"></img>
</div>
<div class="fade">
<img src="mockuppp.jpg" width="400" height="300"></img>
</div>
</div>
</body>
</html>
Aber egal was ich tue, ich bekomme das Overlay nicht über das Image, es bleibt ständig drunter. Hab auch schon z-index versucht und andere Dinge, aber nichts hat was gebracht. Wo liegt hier mein Fehler?
Und wie bekomme ich dann einen Text auf dieses Overlay, ohne damit das div zu vergrößern?
Danke im Voraus.
ich würde gerne ein Hover Overlay gestalten, ungefähr so wie bei dieser Seite: http://www.davidundgoliath.com/agentur
Ich hab bis jetzt folgenden Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style type="text/css">
.fade {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
float: left;
}
.fade:hover, .fade:focus, .fade:active {
background-color: #232323;
color: white;
}
</style>
</head>
<body>
<div class="fade">
<img src="mockup1.jpg" width="400" height="300"></img>
</div>
<div class="fade">
<img src="mockuppp.jpg" width="400" height="300"></img>
</div>
</div>
</body>
</html>
Aber egal was ich tue, ich bekomme das Overlay nicht über das Image, es bleibt ständig drunter. Hab auch schon z-index versucht und andere Dinge, aber nichts hat was gebracht. Wo liegt hier mein Fehler?
Und wie bekomme ich dann einen Text auf dieses Overlay, ohne damit das div zu vergrößern?
Danke im Voraus.
