Gallery Image
CODE
×
HTML
<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>
CSS
@media screen and (max-width: 1119px) { div.img-gal-mol { width: 49%; max-width: none; } } @media screen and (max-width: 767px) { div.img-gal-mol { 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; } 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.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.enl-ico.open-lightbox-2:hover, div.enl-ico.open-lightbox-2:focus { opacity:1; } 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: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; } 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; }
JS
Gallery Image
Letzte Änderung: 02.06.2023 - 15:05 Uhr
×
Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen