01020304050607-dashpanel.xv2.us
M
Now XV2

PUSH PLAYER 5.2+

 

Indrevus XV2.us

* * */ -->

- von

;

 

 

Indrevus XV2.us

Jimdo Standard-Galerie (Slider) - redesign-berlin.de - Jimdo Seminare und Schulungen

#start

pseuy

XV2 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
  • musste früher extra eingerückt werden...
  • ...jetzt

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). werden diese manchmal leider in der Vergrößerung mit weißem Hintergrund dargestellt. 

Beispiel: Startseite

 

xv2 PopUp ohne transparent Background
XV2 PopUp ohne transparent Background
Jimdo PopUp mit transparent Background
Jimdo PopUp mit transparent Background

CSS für transparent Background PopUps

 

img.pswp__img {

    background-color: transparent;

}

(0)

::

:::

ohne wid