Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 17, 2017 at 12:37 am #865039
    Boeckske23

    Example: https://i.imgur.com/3ZgiiyF.png

    My current result: https://imgur.com/undefined

    I would like to add the custom background image on hover.

    My current CSS:

    .av-caption-image-overlay-bg{
background-image: url("service_bg.jpg");
}

    service_bg.jpg added to media

    Can you assist please?

    October 17, 2017 at 3:01 am #865055
    Mike

    Hey Boeckske23,
    Your second screenshot is not working, so I’m guessing a little here, please try to use the full url to your image like this:

    .av-caption-image-overlay-bg{
background-image: url("https://127.0.0.1/wp-content/uploads/2015/07/service_bg.jpg");
}

    You may wish to add no-repeat and a background size also:

    .av-caption-image-overlay-bg{
background-image: url("https://127.0.0.1/wp-content/uploads/2015/07/service_bg.jpg");
background-size: cover; 
background-repeat: no-repeat;
}

    But I’m not sure if that was your issue, please try adding the second screenshot again.

    Best regards,
    Mike

    October 17, 2017 at 7:58 pm #865435
    Boeckske23
    This reply has been marked as private.
    October 18, 2017 at 11:16 am #865651
    Victoria

    Hi Boeckske23,

    We need to see the actual css and html to be able to propose a solution for you. Please get back to us when you get the website to some testing server.

    Best regards,
    Victoria

    October 18, 2017 at 11:47 am #865663
    Boeckske23

    Victoria,

    What do you mean?
    I gave you access to the website…

    Do you want me to share the CSS / HTML?

    October 19, 2017 at 1:14 pm #866205
    Boeckske23

    bump

    October 19, 2017 at 3:50 pm #866266
    Guenni007

    i would try to eliminate the fontello icon and than place instead a background-image:

    .image-overlay .image-overlay-inside::before {
    background: url(https://homeurl/wp-content/uploads/2015/07/service_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "\00a0" !important;
}

    see here: Link
    if you like to influence the transparency of the overlay color:

    .avia_transform a:hover .image-overlay {
    opacity: 0.8 !important;
}
    • This reply was modified 7 years, 1 month ago by Guenni007.
    October 19, 2017 at 4:21 pm #866288
    Boeckske23

    doesn’t really do much…

    example

    how it should be:

    example

    Code you gave me with the media file in it:

    .image-overlay .image-overlay-inside::before {
    background: url("https://sanotech.my-tagit.be/wp-content/uploads/2017/10/service_bg-e1508262915962.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    content: "\00a0" !important;
}
    October 19, 2017 at 4:49 pm #866304
    Guenni007

    ok – a screenshot isn’t the way a good advice can be given.
    The code above works (as you can see on my page above on image overlay )

    To have only the colored field behind:

    .av-caption-image-overlay-bg {
    opacity: 1;
    background-color: #1885ad;
    transform: scale(0.9);
}

    you than have to do this with caption text:

    .av-image-caption-overlay-center {
    padding: 20px;
}
    October 19, 2017 at 4:54 pm #866308
    Guenni007

    and try that with your image:

    .av-caption-image-overlay-bg {
    opacity: 1 !important;
    transform: scale(0.9);
    background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2017/10/service_bg-e1508262915962.jpg);
    background-size: cover;
}

    or play a bit with opacity (by the way – maybe it is better to have webkit-opacity too)

    .av-caption-image-overlay-bg {
   -webkit-opacity: 0.7 !important;
    opacity: 0.7 !important;
    transform: scale(0.9);
    background-image: url(https://sanotech.my-tagit.be/wp-content/uploads/2017/10/service_bg-e1508262915962.jpg);
    background-size: cover;
    background-color: #fff !important;
}
    October 19, 2017 at 5:07 pm #866320
    Boeckske23

    Perfect, need to tweaks some little things but I can continue now!

    Many thanks css god!

    October 19, 2017 at 5:31 pm #866336
    Victoria

    Hi Boeckske23,

    Glad you got it working for you! :)


    @Guenni007     thank you :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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