GameBanana | The Game Modding Community - Since 2001
Frickl - SELFHTML-Wiki


Jimdo Standard-Galerie (Slider) - redesign-berlin.de - Jimdo Seminare und Schulungen
CGTrader - 3D Models for VR / AR and CG projects

Explore CGDream,
where AI meets 3D models.

CGDream is a cutting-edge application that leverages the power of generative AI and 3D models to produce stunning 2D images. Your creative journey starts now.

Generate stunning 2D images with CGDream generative AI
Generate stunning 2D images with CGDream generative AI
Generate stunning 2D images with CGDream generative AI
Generate stunning 2D images with CGDream generative AI

Looking For Custom 3D Modeling at Scale?

Introducing Modelry

Powering 3D transformation and commerce growth through affordable, scalable, quality 3D and AR experiences

3D Projects Freelance Hub

3D Model Marketplace

Choose from 1 980 000 3D models for applications such as gaming, AR/VR, advertising, animation, movies and 3D printing

3D Models

3D Models

Buy professional 3D Models for your project

View all >
Low-poly PBR 3D Models

Low-poly PBR 3D Models

Low-poly PBR 3D Models ready for video games, VR & AR real-time applications

View all >
3D Printing Models

3D Printing Models

Find 3D Print Designs for your 3D Printer

View all >
3D Projects Freelance Hub

3D Projects Freelance Hub

Where people with exciting 3D Projects meet talented 3D designers

Sell your 3D Models and Find Freelance Projects

Sell your 3D models and earn up to 80% royalties
Sell 3D Models >
Work with enterprise clients
Get Qualified >
Outsource your skills & get up to 95% royalties
Browse 3D Modeling Jobs >
Build your portfolio and be visible
Browse 3D Designers >
Sell your 3D models
Join CGTrader Community

Join CGTrader Community

Galleries

Showcase your best renders, get feedback and recognition

Tutorials

Learn new skills and teach others

Forum

Find tutorials and discuss other 3D related matters
Help
> ⛶⛶⛶⛶Fullscreen⛶⛶⛶⛶

#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 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;

}

ohne wid