Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 8, 2018 at 11:42 am #1007399
    fxkreative

    Hi Kriesi Team,

    i would like to change the image caption overlay on a site from my costumer.
    If you visit the site, after the video slider you can see some property references from them. Actually if you glide over the image, the image overlay turns black with white writing.

    So my question is, can i insert an own picture for the overlay instead of the black overlay on the references? If its possible i would do it for myself or i could give you a login to the site.

    Thank you like always.

    Kind regards
    Sergej

    September 8, 2018 at 9:03 pm #1007485
    Mike

    Hey fxkreative,
    Yes you can use a image as a overlay instead of the black color overlay and white text, if you want to use the same image for all of the overlays.
    Here is an example, please place this in your Enfold Theme Options > General Styling > Quick CSS field:

    .avia-image-container:hover .av-image-caption-overlay {
content: url(https://mainwesthafen.de/wp-content/uploads/2017/10/Final_Sven-Pawelka-3213-1030x736.jpg) !important;
background-size: contain; 
}

    Best regards,
    Mike

    September 9, 2018 at 4:33 pm #1007623
    fxkreative

    Hi Mike,

    thank you for your answer. It works but not like we wanted and its my fault because i wasnt exactly enough with my description, sry for that.

    I uploaded the background image that we want now but i cant decide the size, even with !important.

    I will post you in private content an example how we want to migrate the backgound image as an overlay.
    But the example site has the overlay/hover effect on the whole content box, we dont want it over the whole content box only over the image how you did it in the post before.

    Thank you again.

    Kind regards
    Sergej

    September 9, 2018 at 5:12 pm #1007628
    Mike

    Hi,
    Oh, I see, thanks.
    the css uses the “background-size” cover so it will “cover” the area, which you will want because the image has a transparent background color.
    I recommend using the same css code but adjust your image so it will look like you want, this is what I think you are trying for:
    anker_new
    I didn’t match the same opacity for the background, so imagine it is all one color.

    Best regards,
    Mike

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