Image-Teaser
CODE
×
HTML
<div class='img-teaser'> <div class='img-galery'></div> <h5>Dies ist eine Headline (H5)</h5> </div>
CSS
@media screen and (max-width: 767px) { div.img-teaser { padding-bottom: 21px; width: 100%; } } .img-teaser:hover > .img-galery::before { opacity: 0; } 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; } 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; } 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:hover > div.img-galery, div.img-teaser:focus > div.img-galery { -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; } } @media screen and (max-width: 767px) { h5 { font-size: 18px; line-height: 21px; } div.img-teaser > h5 { margin-top: 20px; margin-right: 20px; margin-left: 20px; } }
JS
Image-Teaser
Letzte Änderung: 07.07.2021 - 11:03 Uhr
×
Dies ist eine Headline (H5)