94 lines
2.6 KiB
CSS
94 lines
2.6 KiB
CSS
.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;
|
|
}
|