Hero-Area (Big Image - small HL)
CODE
×
HTML
<div class='image-2-small'> <div class='img-hero'></div> <div class='hero-img-teaser-small'><span class='teaser-label-white-small'>Label</span><h2 class="hero-area-small white">Hier soll eine passende Headline stehen</h2></div> </div>
CSS
@media screen and (max-width: 1119px) { div.image-2-small { clear:both; width: 100%; height: auto; } } span.teaser-label-white { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(255,255,255,1); } h2.hero-area.white { font-family: 'Roboto'; font-style: normal; font-weight: 300; color: rgba(255,255,255,1); position:relative; margin-top: 24px; margin-right: 0; margin-bottom: 0; margin-left: 0; max-height: none; } .image-2:hover > .img-hero::before { opacity: 0; } div.img-hero { -webkit-transition: transform 1800ms ease-in-out; transition: transform 1800ms ease-in-out; background-image: url('../img/bern-switzerland-shutterstock_1845136612.jpg_ecb4c93750.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; width: 100%; height: 623px; } div.hero-img-teaser-small { background-color: rgba(78,78,78,1); cursor:pointer; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; padding-top: 28px; padding-right: 25px; padding-bottom: 28px; padding-left: 25px; width: calc(50% - 8.5px); min-height: 143px; } div.image-2-small > div.hero-img-teaser-small { position: absolute; bottom: 0px; left: 0px; } div.hero-img-teaser-small:hover, div.hero-img-teaser-small:focus { background-color: rgba(64,64,64,1); } div.image-2-small:hover > div.img-hero, div.image-2-small:focus > div.img-hero { -webkit-transform: scale(1.03); transform: scale(1.03); } div.image-2-small:hover > div.hero-img-teaser-small, div.image-2-small:focus > div.hero-img-teaser-small { background-color:#404040; } div.hero-img-teaser-small:last-of-type { margin-right: 0; } @media screen and (max-width: 1119px) { div.hero-img-teaser-small { width: 100%; } } @media screen and (max-width: 767px) { div.img-hero { max-height: 64vh; } div.hero-img-teaser-small { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; min-height: auto; } } span.teaser-label-white { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(255,255,255,1); } h2.hero-area.white { font-family: 'Roboto'; font-style: normal; font-weight: 300; color: rgba(255,255,255,1); position:relative; margin-top: 24px; margin-right: 0; margin-bottom: 0; margin-left: 0; max-height: none; }
JS
Hero-Area (Big Image - small HL)
×
Label
Hier soll eine passende Headline stehen