I have a slider set up on an ordered list, each li representing a slide. The div containing this list is being shaped into a parallelogram using clip-path and overflow:hidden. Inside the slides' li-elements are nested each another div containing an h1 and h2 tags. Case is, that I try to position these headlines partly out of the parallelograms boundary, creating an overlapse - which does not work because it seems that the clip-path covers/ cuts the headlines. I tried z-index and a whole lot of approaches, but all in vain. You can see the problem here: www.korkboden-mit-stil.de
Any idea/ help is really appreciated. Greetings!
The sliders html is:
<aside id="fh5co-hero">
<div class="flexslider">
<ul class="slides" style="background:rgba(232, 232, 232, 0.6);">
<li style="background-image: url(images/site/slider/korkparkett_verlegen.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
<div class="slider-text-inner">
<h1><a href="contact.html">30 Jahre Korkparkett</a></h1>
<h2>Hochwertiger Korkboden, solide Ideen, exzellent verlegt.</h2>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/site/slider/korkbelag_kuechen.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
<div class="slider-text-inner">
<h1><a href="contact.html"">Think Out of the Box</a></h1>
<h2 style="color:#000">Korkparkett lässt sich beinahe beliebig variieren. Muster, Farbe, Verlegeart, selbst extravagante Formen.</h2>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/site/slider/fussbodenbelag_kork.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
<div class="slider-text-inner">
<h1><a href="contact.html"">Übrigens</a></h1>
<h2>Kostenfreie Baustellenbesichtigung und Angebotserstellung garantiert.</h2>
</div>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/site/slider/korkboden_varianten_sanierung.jpg);">
<div class="overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-8 col-md-offset-1 slider-text">
<div class="slider-text-inner">
<h1><a href="contact.html"">Besuchen Sie uns</h1>
<h2 style="color:#000">Eine Vielzahl der neuen Muster 2020 sehen Sie jetzt in unserem Musterhaus.</h2>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
The corresponding CSS is:
#fh5co-hero .flexslider .slides {
position: relative;
overflow: hidden;
}
#fh5co-hero .flexslider .slides li {
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
min-height: 800px;
position: relative;
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
#fh5co-hero .flexslider .slides .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#fh5co-hero .flexslider .slider-text {
opacity: 0;
min-height: 800px;
position: relative;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text {
min-height: 500px;
display:none;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
position: absolute;
bottom: 0;
left: 0;
padding: 0 2em 3em 0;
margin-left: 0px;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
text-align: right;
margin-left: 100px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1, #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
margin: 0;
padding: 0;
color: black;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
margin-bottom: 10px;
font-size: 60px;
line-height: 1.3;
font-weight: 300;
color: #fff;
display: inline;
display: inline;
background-color: #240C08;
box-shadow: 0.1em 0 0 #191919, -0.1em 0 0 #151515;
padding: 0.1em 0.3em;
box-decoration-break: clone;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 a {
color: #fff;
}
@media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h1 {
font-size: 24px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 22px;
line-height: 1.5;
margin-bottom: 10px;
margin-top: 10px;
color: rgba(255, 255, 255, 0.8);
font-family: "Open Sans", arial, sans-serif;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 a {
color: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
I'm afraid that with current structure it's barely possible. z-index will not help because internal (child) elements will be cropped by their parent container.
If changing a structure is not the case I'd suggest to put background images right after the headlines, e.g. as img elements or imgs in a span or div, make them filling the entire parent li container and put them lower than headlines with z-index.
Please see this pen as an example. Hope this helps.