Hero-Area (Theme-Site)
CODE
×
HTML
<div class='image-3'> <div class='img-hero-theme'></div> <div class='hero-img-teaser-theme'><h2 class="hero-area white theme"><b>Asyl</b> ist ein Menschenrecht</h2></div> </div>
CSS
@media screen and (max-width: 1119px) { div.image-3 { clear:both; } } h2.hero-area { font-size: 34px; line-height: 41px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: rgba(0,0,0,1); position:absolute; left:0; bottom:0; overflow:hidden; text-overflow:ellipsis; margin-bottom: 30px; margin-left: 25px; width: calc(100% - 48px); } h2.hero-area.white.theme{ color: rgba(255,255,255,1); position:relative; display: table-cell; vertical-align: middle; margin: 0 !important; } .img-hero-theme::before { background-color: #000; position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; opacity: 0.05; -webkit-transition: all 450ms ease-in-out; transition: all 450ms ease-in-out; } .image-3:hover > .img-hero-theme::before { opacity: 0; } div.img-hero-theme { -webkit-transition: transform 1800ms ease-in-out; transition: transform 1800ms ease-in-out; background-image: url('../img/asyl.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; width: 100%; height: 623px; } div.hero-img-teaser-theme { background-color: rgba(78,78,78,1); cursor:pointer; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; display:table; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; width: calc(33.3% - 11.34px); } div.image-3 > div.hero-img-teaser-theme { position: absolute; bottom: 0px; left: 0px; } div.hero-img-teaser-theme:hover, div.hero-img-teaser-theme:focus { background-color: rgba(64,64,64,1); } div.image-3:hover > div.img-hero-theme, div.image-3:focus > div.img-hero-theme { -webkit-transform: scale(1.03); transform: scale(1.03); } div.image-3:hover > div.hero-img-teaser-theme, div.image-3:focus > div.hero-img-teaser-theme { background-color: #404040; } div.hero-img-teaser-theme:last-of-type { margin-right: 0; } @media screen and (max-width: 1119px) { div.img-hero-theme { height: 523px; } div.hero-img-teaser-theme { width: 100%; } } @media screen and (max-width: 767px) { div.img-hero-theme { height: 423px; max-height: 64vh; min-height: 323px; } div.hero-img-teaser-theme { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; min-height: auto; } } h2.hero-area.white.theme{ color: rgba(255,255,255,1); position:relative; display: table-cell; vertical-align: middle; margin: 0 !important; }
JS
Hero-Area (Theme-Site)
×
Asyl
ist ein Menschenrecht