Flip-Box with one Iconbox and for that grid-item : Inverse Layout
custom class here: one-flipper
Flip-Box with one Iconbox and for that grid-item : Normal Layout
custom class here: one-flipper-normal
on those grid-cells with the flip-box – set all paddings to zero
Values of height settings depends on your image aspect ratio (example above have a 16/9 ratio)
and of course depending on whether they are in a half, third etc. container.
.avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback,
.avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front {
margin: 0 !important;
}
@media only screen and (min-width:768px) {
.av-layout-grid-container.one-flipper {
min-height: 28.12vw;
}
.av-layout-grid-container.one-flipper .avia-icon-grid-container,
.av-layout-grid-container.one-flipper .article-icon-entry {
min-height: 28.12vw;
}
}
@media only screen and (max-width:767px) {
.av-layout-grid-container.one-flipper .avia-icon-grid-container,
.av-layout-grid-container.one-flipper .article-icon-entry {
min-height: 56.25vw;
}
}
@media only screen and (min-width:768px) {
.av-layout-grid-container.one-flipper-normal {
min-height: 28.12vw;
}
.av-layout-grid-container.one-flipper-normal .avia-icon-grid-container,
.av-layout-grid-container.one-flipper-normal .article-icon-entry {
min-height: 28.12vw;
}
}
@media only screen and (max-width:767px) {
.av-layout-grid-container.one-flipper-normal .avia-icon-grid-container,
.av-layout-grid-container.one-flipper-normal .article-icon-entry {
min-height: 56.25vw;
}
}for that glassy frost effect use:
.av-layout-grid-container.one-flipper-normal .avia-icongrid-front.bg-img .avia-icongrid-inner,
.av-layout-grid-container.one-flipper .avia-icongrid-flipback.bg-img .avia-icongrid-inner {
background-color: rgba(255,255,255,0.5) !important;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
width: 70%;
margin: 0 15% !important;
border: 2px solid #FFF;
border-radius: 15px;
}
.av-layout-grid-container.one-flipper-normal .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-front,
.av-layout-grid-container.one-flipper .avia-icongrid-flipbox .av-icon-cell-item .avia-icongrid-flipback {
transform-style: flat !important;
}Webers Webdesign
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren