Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 2, 2016 at 1:51 pm #592056
    flippingrocks

    Hi,
    I need some help pls with the image overlay – since they do not fit the image exactly, it is too big. Pls go to the start page and hover over one of those big icons (Mechatroniker …) to see what I mean. Thank you for your help

    March 4, 2016 at 5:50 pm #593414
    Vinay

    Hi flippingrocks!

    We are working on your ticket please wait while we update the results here soon. You have pointed out the issue but haven’t mentioned exactly what you want to do with it… I’m assuming you want to disable the image overlay.

    To disable the image over please add the css provided int he below link to Enfold > General Styling > Quick CSS

    Disable CSS Overlay on images

    Cheers!
    Vinay Kashyap

    • This reply was modified 8 years, 8 months ago by Vinay.
    March 30, 2016 at 2:19 pm #605169
    flippingrocks

    Hi Vinnie,
    I´m pointing out that the overlay does not fit – therefore I would like to have it fitting :)
    The image overlay should fit the image exactly in size

    thanks for your help

    March 31, 2016 at 9:05 am #605719
    Ismael

    Hey!

    Note that the image overlay will cover the whole image including the transparent sides. You have to crop the sides of the png image. If there are no transparent sides, edit the link tag’s style attribute. Specify the width to be the same as the actual image. Example:

    <a href="http://rena.flippingrocks.de/mechatroniker-in/" style="width: 120px; height: 120px; float: none; text-align: center; margin: 0px auto; padding: 0px;"><img class="wp-image-128 size-full aligncenter" src="http://rena.flippingrocks.de/wp-content/uploads/2016/01/Mechatroniker120.png" alt="" width="120" height="120" srcset="http://rena.flippingrocks.de/wp-content/uploads/2016/01/Mechatroniker120-80x80.png 80w, http://rena.flippingrocks.de/wp-content/uploads/2016/01/Mechatroniker120-36x36.png 36w, http://rena.flippingrocks.de/wp-content/uploads/2016/01/Mechatroniker120.png 120w" sizes="(max-width: 120px) 100vw, 120px"></a>

    We set the width and height property to 120px, the margin to “0 auto” then remove the “aligncenter” class attribute.

    Best regards,
    Ismael

    March 31, 2016 at 2:27 pm #605899
    flippingrocks

    HI Ismael,
    thanks for your help:
    the images have no transparent sides – they are really 120px right to the edge.
    Therefore I tried to use your code – but without success.

    I tried to modify the overlay itself:
    I can see that the span.image-overlay has the following element-style.

    element.style {
    display: block;
    height: 140px;
    left: 97.4667px;
    overflow: hidden;
    top: 0;
    width: 130px;
    }

    I have no idea where it gets its height and width from. If I force the height and the width to be 120px the overlay is no longer centered on the image but has a set off.

    Any thoughts? thanks

    April 1, 2016 at 5:43 am #606479
    Ismael

    Hey!

    We created an example here: http://rena.flippingrocks.de/test/

    Cheers!
    Ismael

    April 1, 2016 at 8:27 am #606536
    flippingrocks

    Hi Ismael,
    thanks – that`s a great help!

    April 3, 2016 at 5:00 am #607108
    Ismael

    Hey!

    No problem. Let us know if you need anything else. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘image overlay does not fit’ is closed to new replies.