CSS für Fotos

Hi there,

yes this is the right place for GP Premium support :)
Can you share a link to a page or post and let me know what image you require adding the shadow to - i can then advise how to do it.

Can I actually write in German or should I always translate?

You can write in German, we will use Google Translate, so please do whatever is easiest for you!

Vielen Dank , dann ist es für mich einfacher.
Danke für die schnelle Antwort.
Hier die Links zu den Bildern:

1.)https://staging.mapure-cosmetics.de/ Bild Frau in Rotem Pullover
2.)https://staging.mapure-cosmetics.de/shop-biokosmetik-hautpflege/ Bild Frau mit rotem Pullover
3.)https://staging.mapure-cosmetics.de/shop-biokosmetik-hautpflege/ Bei den Produkten bin ich nicht sicher ob es zu viel ist?

Vielen Dank
Walter

Ach und noch eine bitte...
Gibt es eine Möglichkeit für die Fotos ein Abheben zu erzeugen ?

Siehe diese Seite https://www.chefkoch.de/

Das wäre prima
Vielen Dank

Lets start with adding a shadow and we can look at the other styles.

1. Add this CSS to your site:

.gb-container.shadow-style,
.wp-block-image.shadow-style img {
    box-shadow: 0 9px 18px 0px rgba(0,0,0,0.2);
}

2. Select an Image Block or a Container Block ( eg. the individual columns for each of your products) and in Advanced > Additional CSS Class(es) add: shadow-style

Any container or image block you add the shadow-style class to will get that shadow.

See if that works first and then we can look at the other styles.

Richtig richtig richtig gut!!!!! Wow Danke das ist Großartig ...was für ein mega support !!!!!!! Danke Danke Danke

Jetzt freue mich auf die Nächste Geschichte.... soll ich einen neuen Call aufmachen ?

OK thats great.
So you want the shadow effect on ALL Products too? ie,

https://staging.mapure-cosmetics.de/shop-biokosmetik-hautpflege/

If yes, then change your CSS to this:

.gb-container.shadow-style,
.wp-block-image.shadow-style img,
.wc-block-grid__product-image img {
    box-shadow: 0 9px 18px 0px rgba(0,0,0,0.2);
}

Then do you want any Image with a Shadow to have the Hover Lift effect ?

Nein ich möchte gerne den leichten Zoom effekt haben wie die Beispiel Adresse die ich geschickt habe. Wenn das bild mit der Maus berührt wird , das es dann einen leichten bewegten effekt gibt ( Leichtes Zoomen). Konnte ich das so erklären ?

Which images do you want the effect applied to? Is it the images you have the shadows on ?

Am liebsten wäre mir im Shop auf die Produkte..Das sich Produkt praktisch etwas nach vorne bewegt. Das wäre perfekt

Try adding this CSS:

.wc-block-grid__product .wc-block-grid__product-image {
    overflow: hidden;
}

.wc-block-grid__product .wc-block-grid__product-image img {
    transition: transform 0.3s ease-in;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img {
    transform: scale(1.1);
}

Das ist es Vielen Dank genauso!!!! + + +

Perfekt hat bestens funktioniert. Ich habe noch zwei Themen mache ein neues Ticket auf und freue mich auf Unterstützung. Bewertet habe ich die Unterstützung mi 5* vielen Dank

Glad to be of help - and thank you very much for the great review