pseudo-title

IMAGES UND SLIDER FÜR JIMDO*

Jimdo Standard-Galerie (Slider)

Slider Bedienelemente außen 

div#cc-m-gallery-10606555721 img {

    border-radius:5px;

    width:50%; 

    height:auto !important;

    }


Standard Bild-Elemente

Bild-Element
Bild-Element

Bild mit Text
Bild mit Text

Bild mit Text - Element

  • Aufzählung neben Bild in mobiler Ansicht nicht möglich
  • musste früher extra eingerückt werden...
  • ...jetzt nicht mehr

Bildunterschrift zentrieren

<style type="text/css">

  .cc-imagewrapper figcaption {

     text-align: center;

   }

</style>    


Galerie zentriert in mobiler Ansicht

 

 

/*Galerien zentriert (mobile View)

--------------------------------------*/        

@media (max-width:767px) {

  .j-gallery    {

  max-width: calc((220px + 2px) *2); 

  margin: 0 auto;

  }

}

 

/*2x 222px + 2x 20px*/

@media (max-width:484px) {

  .j-gallery     {

  max-width: calc((220px + 2px) *1);

  margin: 0 auto;

  }

}

Galerien mit Raster

    

/*Galerie Rahmen

-----------------------------------------------*/

div#cc-m-gallery-10607030021 .thumb_sq3 img {

    background: grey !important;

}

ImageTransformation (Hover-Effekt) für Image Galerie

 

 

/*Galerie Image-Transformation OnHover

----------------------------------------------*/

 

#cc-m-10681437621 .ccgalerie .thumb_sq3 {

    background: #333;

}

 

#cc-m-10681437621 .ccgalerie .thumb_sq3 img {

    transform: scale(1.00);

    transition: all 0.25s ease-in;

}

 

#cc-m-10681437621 .ccgalerie .thumb_sq3:hover img {

    transform: scale(1.02);

    opacity: 0.5;

}

 

#gallery_thumb_7341771221:hover:after,  

#gallery_thumb_7341771321:hover:after,

#gallery_thumb_7341771421:hover:after,

#gallery_thumb_7341771521:hover:after {

    content: "Bild 1";

    position: absolute;

    width: 220px;

    margin: -150px 0;

    z-index: 9999;

    font-size: 56px;

    font-weight:normal;

    color: white;

    display: block;

    text-align: center;

}

 

#gallery_thumb_7341771321:hover:after {content: "Bild 2";}

#gallery_thumb_7341771421:hover:after {content: "Bild 3";}

#gallery_thumb_7341771521:hover:after {content: "Bild 4";}

 

Transparenter Hintergrund für Image-PopUp

Bilder mit dem Format .PNG können transparente Bereiche speichern (png24/png32). In Jimdo eingesetzt werden diese manchmal leider in der Vergrößerung mit weißem Hintergrund dargestellt. 

Beispiel: Startseite

 

Jimdo PopUp ohne transparent Background
Jimdo PopUp ohne transparent Background
Jimdo PopUp mit transparent Background
Jimdo PopUp mit transparent Background

CSS für transparent Background in Jimdo PopUps

 

img.pswp__img {

    background-color: transparent;

}