Hallo liebes Forum,
ich habe eine kleine Galerie erstellen wollen, bekomme die Bilder aber mit dem z-index nicht nach vorne.
ich verwende ein Template ( https://freehtml5.co/marble-fr…r-multi-purpose-websites/ ) und versuche dort auf der Seite "portfolio" die Bilder in Vollbild darzustellen.
Folgenden Code habe ich in meine CSS hinzugefügt:
.portfolio a,.portfolio span{background-repeat:no-repeat;background-position:center;}
.portfolio span{position:fixed;left:0;top:0;right:0;bottom:0;display:none;background-color:rgba(20,20,20,1);}
.portfolio a:focus + span{display: block; z-index: 999999;}
#pic1,#pic1 + span{background-image:url(../images/bg/lieblingsgegenstaende.jpg)}
und in der HTML Datei:
<div id="fh5co-main">
<div class="fh5co-narrow-content">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">Portfolio</h2>
<div class="row row-bottom-padded-md">
<div class="portfolio col-md-3 col-sm-6 col-padding text-center animate-box">
<a id="pic1" href="#" tabindex="0" class="work image-popup"></a><span> </span>
</div>
<div class="col-md-3 col-sm-6 col-padding text-center animate-box">
<a href="portfolio/portfolio_architektur.html" class="work image-popup" style="background-image: url(images/portfolio/tower_bridge.jpg);">
<div class="desc">
<h3>Tower Bridge</h3>
<span>Architekur</span>
</div>
</a>
</div>
...
Alles anzeigen
Im Anhang ist zu sehen wie es aussieht, das Bild wird komplett im Hintergrund aufgemacht, wenn man drauf klickt.
ich habe etwas gegoogelt warum z-index nicht funktioniert, habe die Möglichkeiten die ich gefunden habe geprüft:
- position NICHT static
- display block
- z-index auf !important stellen
dann sollte es ja funktionieren.
Bei dem Template ist aber noch einiges mit JavaScript geschrieben, ich hoffe hier kommt mir nichts in die Quere. Habt ihr eine Idee woran das liegen kann?