Hello

Flip-Box with one Iconbox and for that grid-item : Inverse Layout

custom class here: one-flipper

  • Grid Title 1

    Grid Sub-Title

    Standort Saalfelden

Hello

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

Kontakt

Ruhetag - öffnet am Montag (15.12.) um 08:00 Uhr

Adresse

Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn

Anfahrt
Anrufen
E-Mail senden

You are currently viewing a placeholder content from Google Maps. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information
Accept required service and unblock content