-
NEW
-
Jimdo Standard-Galerie (Slider) - redesign-berlin.de - Jimdo Seminare und Schulungen CGTrader - 3D Models for VR / AR and CG projects For DesignersXV2
Join CGTrader Community
Galleries
Showcase your best renders, get feedback and recognitionTutorials
Learn new skills and teach othersForum
Find tutorials and discuss other 3D related matters> ⛶⛶⛶⛶Fullscreen⛶⛶⛶⛶mailto: HTML email link mailto:newindrevus@gmail.com e-mail recipient address Letter to Go
Mail to email address
E-Mail to link Maker
<a href="mailto:newindrevus@gmail.com">Send mail</a>
The code will generate this link:
Press
See also
IMAGES UND SLIDER
#start
pseuy
XV2 Standard-Galerie (Slider)
Standard Bild-Elemente
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 Jimdo PopUp mit transparent Background
CSS für transparent Background PopUps
img.pswp__img {
background-color: transparent;
}
R5K – EDM:Radio
