// // Bilddarstellung auf Detailseiten // Ggf mit Lightbox-Funktion (Lupe zeigen) // .detail-img { position: relative; margin-top: 1.5em; margin-bottom: 3em; img { display: block; } .gallery-wrapper & { margin-top: 0 !important; margin-bottom: 1em !important; } .detail-img-inner { position: relative; } > a, .detail-img-inner > a { display: block; position: relative; overflow: hidden; } &.article-img-double, &.captioned { margin-bottom: 0; } } .img-description { font-style: italic; font-weight: $font-weight-normal; font-size: 13px; padding: 2px 0; } .article-media-caption { margin-top: rem-calc(28); font-family: $header-font-family; color: $black; font-size: rem-calc(16); .article-media-title { text-transform: uppercase; font-weight: $font-weight-bold; color: $green; } .caption-underline { border: rem-calc(3) solid $green; margin-top: rem-calc(16); } &.caption-margin { margin-bottom: 3rem; } } .download-img { margin-top: 1.5em; } // Small @include breakpoint(small only) { .detail-img { + .detail-img { margin-top: -1.5em; } > a, .detail-img-inner > a { // Overlay &:after { content: ""; position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 60px; height: 60px; background: $white; opacity: .9; border-radius: 100%; .gallery-wrapper & { display: none; } } // Lupe .magnifier { position: absolute; right: 30px; bottom: 30px; z-index: 2; width: 24px; height: 24px; border: 4px solid $green; border-radius: 100%; &:after { content: ""; position: absolute; top: 100%; left: 100%; width: 4px; height: 11px; margin: -1px 0 0 -3px; border-radius: 2px; background: $green; @include transform-origin( 50% 0 ); @include transform( rotate(-45deg) ); } .gallery-wrapper & { display: none; } } } .copyright-info { right: auto; left: 5px; } &.title-img {margin-bottom: 3rem;} } .widget-image-article-wrapper .detail-img + .detail-img { margin-top: 1.5em; } } // Medium @include breakpoint(medium) { body.desktop .detail-img > a, body.desktop .detail-img .detail-img-inner > a { // Overlay &:after { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: $green; mix-blend-mode: soft-light; opacity: 0; transition: opacity 250ms; } // Lupe .magnifier { position: absolute; top: 150%; left: 50%; z-index: 2; width: 60px; height: 60px; margin: -35px 0 0 -35px; border: 11px solid $white; border-radius: 100%; transition: top 250ms; &:after { content: ""; position: absolute; top: 100%; left: 100%; width: 11px; height: 28px; margin: -1px 0 0 -5px; border-radius: 2px; background: $white; @include transform-origin( 50% 0 ); @include transform( rotate(-45deg) ); } } &:hover { &:after { opacity: 1; } .magnifier { top: 50%; transition: top 250ms 150ms; } } } // IE und Edge konnen kein 'mix-blend-mode', daher dieser Sonderfall body.desktop.edge .detail-img a:hover:after { opacity: .2; } }