Image Gallery
CODE
×
HTML
<div class='image-galery'> <h2>Der Mut stellt sich die Wege kürzer vor</h2> <div class='img-gal-mol'> <div class='img-galery'></div> <div class='enl-ico open-lightbox-2'></div> <div class='copyright-box-2'><span class="cb-1">Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen</span><span class="cb-2"><img style="height: 20px;vertical-align: top;margin-top: 2px;" src="img/camera.svg"></span></div> </div> <div class='img-gal-mol-2'> <div class='img-galery i2'></div> <div class='enl-ico open-lightbox-2'></div> </div> <div class='img-gal-mol-3'> <div class='img-galery i3'></div> <div class='enl-ico open-lightbox-2'></div> </div> <div class='img-gal-mol-4'> <div class='img-galery i4'></div> <div class='enl-ico open-lightbox-2'></div> </div> <div class='img-gal-mol-7'> <div class='img-galery i7'></div> <div class='enl-ico open-lightbox-2'></div> </div> <div class='img-gal-mol-6'> <div class='img-galery i6'></div> <div class='enl-ico open-lightbox-2'></div> </div> <button class='primary more'>Mehr laden</button> </div>
CSS
@media screen and (max-width: 1119px) { div.img-gal-mol { width: 49%; max-width: none; } div.img-gal-mol-2 { margin-bottom: 2%; margin-right: 2%; width: 49%; margin-right: 0; max-width: none; } div.img-gal-mol-3 { margin-bottom: 2%; margin-right: 2%; width: 49%; max-width: none; } div.img-gal-mol-4 { margin-bottom: 2%; margin-right: 2%; width: 49%; margin-right: 0; max-width: none; } div.img-gal-mol-6 { margin-bottom: 2%; margin-right: 2%; width: 49%; max-width: none; margin-right: 0; } div.img-gal-mol-7 { margin-bottom: 2%; margin-right: 2%; width: 49%; max-width: none; } } @media screen and (max-width: 767px) { div.img-gal-mol { margin-bottom: 5%; width: 100%; } div.img-gal-mol-2 { margin-bottom: 5%; width: 100%; } div.img-gal-mol-3 { margin-bottom: 5%; width: 100%; } div.img-gal-mol-4 { margin-bottom: 5%; width: 100%; } div.img-gal-mol-6 { margin-bottom: 5%; width: 100%; clear:both; } div.img-gal-mol-7 { margin-bottom: 5%; width: 100%; } } div.enl-ico.open-lightbox-2 { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iR3J1cHBlXzQ5NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA0NiA0NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDYgNDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiM3MDcwNzA7ZW5hYmxlLWJhY2tncm91bmQ6bmV3ICAgIDt9DQoJLnN0MXtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxyZWN0IGlkPSJSZWNodGVja18xMDgiIHk9IjAiIGNsYXNzPSJzdDAiIHdpZHRoPSI0NiIgaGVpZ2h0PSI0NiIvPg0KPGcgaWQ9IkdydXBwZV8xMjkwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzc3LjAwMiAtMzc5OC45OTgpIj4NCgk8cGF0aCBpZD0iVmVyZWluaWd1bmdzbWVuZ2VfNCIgY2xhc3M9InN0MSIgZD0iTTc5NS4zLDM4MTlsLTQuNy00Ljd2MS45YzAsMC42LTAuNSwxLjItMS4yLDEuMnMtMS4yLTAuNS0xLjItMS4ydi00LjcNCgkJYzAtMC42LDAuNS0xLjIsMS4yLTEuMmg0LjdjMC42LDAsMS4yLDAuNSwxLjIsMS4ycy0wLjUsMS4yLTEuMiwxLjJoLTEuOWw0LjcsNC43YzAuNSwwLjUsMC41LDEuMiwwLDEuNw0KCQlDNzk2LjYsMzgxOS41LDc5NS44LDM4MTkuNSw3OTUuMywzODE5TDc5NS4zLDM4MTl6Ii8+DQoJPHBhdGggaWQ9IlZlcmVpbmlndW5nc21lbmdlXzIiIGNsYXNzPSJzdDEiIGQ9Ik04MTAuNSwzODMzLjdoLTQuN2MtMC42LDAtMS4yLTAuNS0xLjItMS4yYzAtMC42LDAuNS0xLjIsMS4yLTEuMmgxLjlsLTQuNy00LjcNCgkJYy0wLjUtMC41LTAuNC0xLjIsMC0xLjdjMC41LTAuNCwxLjItMC40LDEuNiwwbDQuNyw0Ljd2LTEuOWMwLTAuNiwwLjUtMS4yLDEuMi0xLjJzMS4yLDAuNSwxLjIsMS4ydjQuNw0KCQlDODExLjcsMzgzMy4yLDgxMS4yLDM4MzMuNyw4MTAuNSwzODMzLjdMODEwLjUsMzgzMy43eiIvPg0KCTxwYXRoIGlkPSJWZXJlaW5pZ3VuZ3NtZW5nZV8xIiBjbGFzcz0ic3QxIiBkPSJNODAzLDM4MTljLTAuNS0wLjUtMC41LTEuMiwwLTEuN2wwLDBsNC43LTQuN2gtMS45Yy0wLjYsMC0xLjItMC41LTEuMi0xLjINCgkJczAuNS0xLjIsMS4yLTEuMmg0LjdjMC42LDAsMS4yLDAuNSwxLjIsMS4ydjQuN2MwLDAuNi0wLjUsMS4yLTEuMiwxLjJjLTAuNiwwLTEuMi0wLjUtMS4yLTEuMnYtMS45bC00LjcsNC43DQoJCUM4MDQuMiwzODE5LjUsODAzLjUsMzgxOS41LDgwMywzODE5TDgwMywzODE5TDgwMywzODE5eiIvPg0KCTxwYXRoIGlkPSJWZXJlaW5pZ3VuZ3NtZW5nZV8zIiBjbGFzcz0ic3QxIiBkPSJNNzg5LjUsMzgzMy43Yy0wLjYsMC0xLjItMC41LTEuMi0xLjJ2LTQuN2MwLTAuNiwwLjUtMS4yLDEuMi0xLjINCgkJYzAuNiwwLDEuMiwwLjUsMS4yLDEuMnYxLjlsNC43LTQuN2MwLjUtMC41LDEuMi0wLjUsMS43LDBzMC41LDEuMiwwLDEuN2wtNC43LDQuN2gxLjljMC42LDAsMS4yLDAuNSwxLjIsMS4ycy0wLjUsMS4yLTEuMiwxLjINCgkJTDc4OS41LDM4MzMuN0w3ODkuNSwzODMzLjd6Ii8+DQo8L2c+DQo8L3N2Zz4='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; opacity: 0.6; cursor:pointer; width: 46px; height: 46px; } h2 { font-size: 30px; line-height: 36px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; margin: 0 0 12px -2px; max-width: 800px; color: var(--black); margin-left: -2px; } 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.i6 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Bild6.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; } button.primary.more { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); color: var(--white); text-align:center; display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 12px 40px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; cursor: pointer; } div.img-galery.i7 { width:100%; height:100%; position:absolute; top: 0; left: 0; background-image: url('../img/Organigramm.png'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: contain; -webkit-transition: transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } div.copyright-box-2 { color: var(--black); background-color: rgba(255,255,255,0.42); font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; cursor:pointer; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 8px; } div.img-gal-mol > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.img-gal-mol > div.copyright-box-2 { position: absolute; bottom: 0; right: 0; } div.img-gal-mol-2 > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.img-gal-mol-3 > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.img-gal-mol-4 > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.img-gal-mol-6 > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.img-gal-mol-7 > div.enl-ico.open-lightbox-2 { position: absolute; top: 0; right: 0; } div.enl-ico.open-lightbox-2:hover, div.enl-ico.open-lightbox-2:focus { opacity:1; } button.primary.more:hover, button.primary.more:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } div.img-gal-mol > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol-2 > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol-2 > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol-3 > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol-3 > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol-4 > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol-4 > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol-6 > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol-6 > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol-7 > div.enl-ico.open-lightbox-2:hover, div.img-gal-mol-7 > div.enl-ico.open-lightbox-2:focus { opacity: 1; } div.img-gal-mol:hover > div.img-galery, div.img-gal-mol:focus > div.img-galery { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-gal-mol:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } div.img-gal-mol-2:hover > div.img-galery.i2, div.img-gal-mol-2:focus > div.img-galery.i2 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-gal-mol-2:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol-2:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } div.img-gal-mol-3:hover > div.img-galery.i3, div.img-gal-mol-3:focus > div.img-galery.i3 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-gal-mol-3:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol-3:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } div.img-gal-mol-4:hover > div.img-galery.i4, div.img-gal-mol-4:focus > div.img-galery.i4 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-gal-mol-4:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol-4:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } div.img-gal-mol-6:hover > div.img-galery.i6, div.img-gal-mol-6:focus > div.img-galery.i6 { -webkit-transform: scale(1.03); transform: scale(1.03); } div.img-gal-mol-6:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol-6:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } div.img-gal-mol-7:hover > div.enl-ico.open-lightbox-2, div.img-gal-mol-7:focus > div.enl-ico.open-lightbox-2 { opacity: 1; } @media screen and (max-width: 1119px) { h2 { font-size: 24px; line-height: 29px; margin: -3px 0 8px -1px; margin-left: -1px; } } @media screen and (max-width: 767px) { h2 { font-size: 21px !important; line-height: 25px !important; margin: -2px 0 12px 0px; margin-left: 0px; } } span.cb-1 { display: none; } span.cb-2 { font-size: 1.5rem; font-weight: 700; line-height: 1 } div.copyright-box-2.open { background-color: rgba(255,255,255,0.68); } div.copyright-box-2.open span.cb-1 { display: inline; } div.copyright-box-2.open span.cb-2 { display: none; } button.primary { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; line-height: 125%; background-color: rgba(78,78,78,1); color: var(--white); text-align:center; display: inline-block; height: 49px; border-radius: 49px; border: none; padding: 12px 40px; vertical-align: middle; margin: 40px 30px 40px -1px; transition: transform 250ms ease-in-out; cursor: pointer; } button.primary:hover, button.primary:focus { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); }
JS
Image Gallery
×
Der Mut stellt sich die Wege kürzer vor
Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen
Mehr laden