Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 26, 2018 at 9:29 am #1026671
    frasche

    Hallo,
    ich habe heute die neue Version 4.5 installiert. Bei der Bearbeitung dieser Seite musste ich feststellen, dass nun 2 Bildfunktionen nicht mehr gehen:
    1. Bild Hover-Effekt (Ja, Bild leicht vergrößern) funktioniert überhaupt nicht
    2. Wenn ein Link auf ein Bild mit Bild Hover-Effekt gelegt wurde, dann wird ein großes weißes Feld um das Bild beim Mouse Over angezeigt. Wenn man den Hover Effekt ausschaltet, ist die Darstellung korrekt.

    Schade, dass ihr ein Update rausbringt und solche Fehler überseht. Das sollte nicht passieren, denn ich vertraue auf ENFOLD und habe bereits bei 9 Kunden Enfold installiert. Bitte behebt den Fehler schnellstmöglich oder zeigt mir einen Weg, wie ich das selbst machen kann.

    October 30, 2018 at 4:47 am #1027840
    Ismael

    Hey frasche,

    Thank you for using Enfold.

    1.) The css styles for the hover effect must have been deleted. You can add this css code for now until this is fixed.

    .avia_image {
    -webkit-transition: all 0.7s;
    transition: all 0.7s;
}

.av-hover-grow:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

    2.) I can’t reproduce that issue on my end. Can you give us a link to a test page?

    Best regards,
    Ismael

    October 30, 2018 at 10:18 am #1027925
    frasche
    This reply has been marked as private.
    October 31, 2018 at 12:13 am #1028296
    Ismael

    Hi,

    You don’t need to modify any css files. Just add that css code in the Enfold > General Styling > Quick CSS field or your child theme’s style.css file.

    Best regards,
    Ismael

    October 31, 2018 at 1:18 am #1028320
    frasche
    This reply has been marked as private.
    November 2, 2018 at 8:49 am #1029068
    Ismael

    Hi,

    Thanks for the update.

    Can we access the site? I would like to check the css codes.
    You can use this css code to fix the overlay issue temporarily.

    .avia-image-overlay-wrap a.avia_image .image-overlay {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

    Best regards,
    Ismael

    November 16, 2018 at 9:26 am #1034333
    profil77

    Hi,
    overlay:in Enfold 4.5, / config-templatebuilder/avia-shortcodes/image/image.css, the lines 17 – 21 were added:

    .av-hover-grow,
.av-hover-grow .avia-image-overlay-wrap a.avia_image 
{
    overflow: visible;
}

    WHY?
    Please change the code to “overflow: hidden” and everything will work fine …
    …
    grow: in Enfold 4.5, / config-templatebuilder/avia-shortcodes/gallery/gallery.css, someone killed the lines 31 – 36.
    WHY?
    Cheers
    Bernd

    • This reply was modified 6 years ago by profil77.
    November 19, 2018 at 3:48 am #1034987
    Ismael

    Hi,

    Thanks for the info. I’ll forward that to the dev team.

    UPDATE: I just realized it was changed due to a reported bug on Safari where the image overflows outside a circle image.

    // http://i.imgur.com/OhJGFOg.jpg

    You can always override that css code on the Quick CSS field or the style.css fiel if you don’t want the image to overflow outside the “grow” container.

    Best regards,
    Ismael

    January 9, 2020 at 7:09 pm #1171920
    rallegrafix

    The enlarging works only then the enlarged picture is behind the text. What do you have to do? CSS z-index? or something like that?
    Best regards
    Ralph

    January 13, 2020 at 4:18 am #1172624
    Ismael

    Hi,


    @rallegrafix    : Try to add this css code to prevent the image from running outside the container.

    .avia-image-container.av-hover-grow, .avia-image-container.av-hover-grow .avia-image-container-inner, .avia-image-container.av-hover-grow .avia-image-overlay-wrap a.avia_image {
	overflow: hidden;
}

    Best regards,
    Ismael

    January 13, 2020 at 10:03 am #1172696
    rallegrafix

    Thank you for your prompt reply. But my problem is different. When zooming, the image should always be in the foreground and not overlaid by other elements. Is there a solution for this?

    January 14, 2020 at 12:38 pm #1173256
    Ismael

    Hi,

    Thank you for the clarification.

    Try to add a custom css class attribute to the column containing the image, then adjust its z-index property. Example:

    .custom-column-with-image {
  position: relative;
  z-index: 1000;
}

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.