blue bar above image – Webers Testseite

This Image Alb got a custom class: blue-info

This is an image caption – you can use it with some custom css

.blue-info .avia-image-overlay-wrap {
  display: grid;
  grid-template-rows: auto 1fr;
}

.blue-info .av-image-caption-overlay {
  position: relative;
  height: auto;
}

.blue-info .av-image-caption-overlay-center {
  padding: 0.5em 1em;
}

#top .blue-info .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
  opacity: 1 !important;
}

a caption on an image inside a text-block alb.

.avia_textblock.img-with-caption .wp-caption > *:first-child { grid-area: feld2 }
.avia_textblock.img-with-caption .wp-caption .wp-caption-text  { grid-area: feld1 }


.avia_textblock.img-with-caption .wp-caption {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "feld1" "feld2";
}

.avia_textblock.img-with-caption .wp-caption img {  
  background-color: blue; 
  padding: 0 !important;

}

.avia_textblock.img-with-caption .wp-caption .wp-caption-text  {  
  background-color: #141fba; 
  display: block ;
  color: #FFF;
  font-style: normal;
  font-size: 18px;
  font-family: inherit;
  width: 100%;
  padding: 0.5em;
}

The image itself got custom-class: img-with-caption-right

Here we got two 1/2 columns – and under them one empty 1/3 column followed by a 3/5 Column: inside each text-block element with an image ( caption is the text then next to it )

a caption on an image inside a text-block alb.

Blume am Wegesrand

A Text-Block Element with a single Image inside ( Caption Text besides the image )

/**** first the field definitions ********/

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  { grid-area: feld1 }
/*** depends on if there is a link on the image or not  ****/
#top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 }


#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #666;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "feld2 feld1";
  align-items: flex-end;
}

#top .avia_textblock.img-with-caption-right .wp-caption img {
  padding: 0 !important;
} 

#top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text  {  
  display: block ;
  color: #000;
  font-style: normal;
  font-size: 18px;
  font-family: inherit;
  width: 100%;
  padding: 0 1em;
  text-align: left;
}

.avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p {  
  margin: 0 !important;
}

/*** if you like to have on top of the image a space******/
#top .avia_textblock.img-with-caption-right .wp-caption img {
  margin-top: 20px
}

/**** for responsive case maybe:*****/

@media only screen and (min-width: 990px) and (max-width: 1051px) {
  #top .avia_textblock.img-with-caption-right .wp-caption {
    grid-template-columns: 1fr;
    grid-template-areas: "feld2" "feld1" !important;
  }
}

Caption of that image

a totaly different Caption here

#top .overlay-caption-on-right .avia-image-overlay-wrap {
  width: 100% !important;
  margin: 0;
  gap: 20px;
  display: grid !important;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "feld2 feld1";
  align-items: flex-end;
  border: 1px solid #666;
  border-radius: 10px 0 0 50px;
  overflow: hidden;
}

#top .overlay-caption-on-right .av-image-caption-overlay { 
  grid-area: feld1; 
  position: relative;
  height: unset;
  text-align: left;
  padding: 0 !important;
}

#top .overlay-caption-on-right .av-image-caption-overlay * { 
  text-align: left;
  padding: 0 !important;
}

#top .overlay-caption-on-right .avia_image { 
  grid-area: feld2;
  border-radius: 0;
}

Click here to add your own text

The image itself got custom-class: img-with-caption-right

Kontakt

Telefon

E-Mail