Image-Teaser-Group (Main-Column)
CODE
×
HTML
<div class='row-img-teaser-main main-column'> <div class='img-teaser'> <div class='img-galery'></div> <h5>Dies ist eine Headline (H5)</h5> </div> <div class='img-teaser i2'> <div class='img-galery i2'></div> <h5 class='clone'>Dokumente und Formulare (Download)</h5> </div> <div class='img-teaser i3'> <div class='img-galery i3'></div> <h5>Dies ist eine Headline (H5)</h5> </div> <div class='img-teaser i4'> <div class='img-galery i4'></div> <h5>Dies ist eine Headline (H5)</h5> </div> <div class='img-teaser i5'> <div class='img-galery i5'></div> <h5>Dies ist eine Headline (H5)</h5> </div> </div>
CSS
@media screen and (max-width: 767px) { div.row-img-teaser-main.main-column { display:block; } } @media screen and (max-width: 1119px) { div.main-column { margin-left: 30px; margin-right: 30px; width: calc(100% - 60px); margin-top: 115px; } } @media screen and (max-width: 767px) { div.main-column { margin-left: 20px; margin-right: 20px; width: calc(100% - 40px); margin-top: 45px; } } @media screen and (max-width: 767px) { div.img-teaser { padding-bottom: 21px; width: 100%; } div.img-teaser.i2 { padding-bottom: 21px; width: 100%; } div.img-teaser.i3 { padding-bottom: 21px; width: 100%; } div.img-teaser.i4 { padding-bottom: 21px; width: 100%; } div.img-teaser.i5 { padding-bottom: 21px; width: 100%; } } div.img-galery { width:100%; height:100%; position:absolute; background-image: url('../img/Bild1.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; top: 0; left: 0; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } div.img-galery.i2 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Bild2.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } div.img-galery.i3 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Bild3.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } div.img-galery.i4 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Bild4.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } div.img-galery.i5 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Bild5.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } h5 { font-size: 21px; line-height: 25px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } h5.clone { font-size: 21px; line-height: 25px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; font-family: 'Roboto'; font-style: normal; font-weight: 300; } div.img-teaser > div.img-galery { position: relative; height: 230px; transform-origin: bottom; } div.img-teaser > h5 { margin-top: 25px !important; margin-right: 25px !important; margin-left: 25px !important; } div.img-teaser.i2 > div.img-galery.i2 { position: relative; height: 230px; transform-origin: bottom; } div.img-teaser.i2 > h5.clone { margin-top: 25px; margin-right: 25px; margin-left: 25px; } div.img-teaser.i3 > div.img-galery.i3 { position: relative; height: 230px; transform-origin: bottom; } div.img-teaser.i3 > h5 { margin-top: 25px; margin-right: 25px; margin-left: 25px; } div.img-teaser.i4 > div.img-galery.i4 { position: relative; height: 230px; transform-origin: bottom; } div.img-teaser.i4 > h5 { margin-top: 25px; margin-right: 25px; margin-left: 25px; } div.img-teaser.i5 > div.img-galery.i5 { position: relative; height: 230px; transform-origin: bottom; } div.img-teaser.i5 > h5 { margin-top: 25px; margin-right: 25px; margin-left: 25px; } div.img-teaser:hover > div.img-galery, div.img-teaser:focus > div.img-galery { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-teaser.i2:hover > div.img-galery.i2, div.img-teaser.i2:focus > div.img-galery.i2 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-teaser.i3:hover > div.img-galery.i3, div.img-teaser.i3:focus > div.img-galery.i3 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-teaser.i4:hover > div.img-galery.i4, div.img-teaser.i4:focus > div.img-galery.i4 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-teaser.i5:hover > div.img-galery.i5, div.img-teaser.i5:focus > div.img-galery.i5 { -webkit-transform: scale(1.03); transform: scale(1.03); } @media screen and (max-width: 1119px) { h5 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } div.img-teaser > div.img-galery { height: 205px; } div.img-teaser.i2 > div.img-galery.i2 { height: 205px; } div.img-teaser.i3 > div.img-galery.i3 { height: 205px; } div.img-teaser.i4 > div.img-galery.i4 { height: 205px; } div.img-teaser.i5 > div.img-galery.i5 { height: 205px; } } @media screen and (max-width: 767px) { h5 { font-size: 18px; line-height: 21px; } h5.clone { font-size: 18px; line-height: 21px; } div.img-teaser > h5 { margin-top: 20px; margin-right: 20px; margin-left: 20px; } div.img-teaser.i2 > h5.clone { margin-top: 20px; margin-right: 20px; margin-left: 20px; } div.img-teaser.i3 > h5 { margin-top: 20px; margin-right: 20px; margin-left: 20px; } div.img-teaser.i4 > h5 { margin-top: 20px; margin-right: 20px; margin-left: 20px; } div.img-teaser.i5 > h5 { margin-top: 20px; margin-right: 20px; margin-left: 20px; } }
JS
Image-Teaser-Group (Main-Column)
×
Dies ist eine Headline (H5)
Dokumente und Formulare (Download)
Dies ist eine Headline (H5)
Dies ist eine Headline (H5)
Dies ist eine Headline (H5)