.fusion-flickr-element { --awb-aspect-ratio: 1 / 1; --awb-object-position: 50% 50%; --awb-column-width: 25%; --awb-column-space: 10; --awb-md-column-width: var(--awb-column-width); --awb-md-column-space: var(--awb-column-space); --awb-sm-column-width: var(--awb-column-width); --awb-sm-column-space: var(--awb-column-space); --awb-margin-top: 0; --awb-margin-right: 0; --awb-margin-bottom: 0; --awb-margin-left: 0; margin-top: var(--awb-margin-top); margin-right: var(--awb-margin-right); margin-bottom: var(--awb-margin-bottom); margin-left: var(--awb-margin-left); } .fusion-flickr-element .flickr-images { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--awb-column-space) / 2 * 1px); } .fusion-flickr-element .flickr-image { width: var(--awb-column-width); padding: 0 calc(var(--awb-column-space) / 2 * 1px); margin-bottom: calc(var(--awb-column-space) * 1px); position: relative; } .fusion-flickr-element .flickr-image img { aspect-ratio: var(--awb-aspect-ratio); object-position: var(--awb-object-position); object-fit: cover; } .fusion-flickr-element.hover-zoomin .flickr-image { overflow: hidden; transform: translate3d(0, 0, 0); } .fusion-flickr-element.hover-zoomin .flickr-image img { transition: opacity 1s, transform 1s; } .fusion-flickr-element.hover-zoomin .flickr-image img:hover { opacity: 0.9; transform: scale3d(1.1, 1.1, 1); } .fusion-flickr-element.hover-zoomout .flickr-image { overflow: hidden; transform: translate3d(0, 0, 0); } .fusion-flickr-element.hover-zoomout .flickr-image img { transform: scale(1.12); transition: opacity 1s, transform 1s; } .fusion-flickr-element.hover-zoomout .flickr-image img:hover { opacity: 0.9; transform: scale(1); } .fusion-flickr-element.hover-liftup .flickr-image { position: relative; } .fusion-flickr-element.hover-liftup .flickr-image img { transform: perspective(1000px) scale(1); transition: transform 0.35s; } .fusion-flickr-element.hover-liftup .flickr-image::before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; content: ""; transition: opacity 0.35s, transform 0.35s; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; } .fusion-flickr-element.hover-liftup .flickr-image:hover img { transform: perspective(1000px) scale(1.03); } .fusion-flickr-element.hover-liftup .flickr-image:hover::before { opacity: 1; transform: scale(1.02); } .fusion-flickr-element.loading { min-height: 250px; display: flex; align-items: center; justify-content: center; } .fusion-flickr-element.loading .fusion-loading-container { margin: 0; }