Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #521027

    Hello,

    how can I have a similar overlay effect on lightbox images than on linked-images ?
    The only difference is about the :before img.
    Carosch

    #521044

    Hey carosch!

    Can you please elaborate on the changes you would like to make? A screenshot would help :)

    Cheers!
    Yigit

    #521061

    Hey Yigit,

    previously, for another subject, you gave me this code for the linked images :

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
        content: '';
        border-radius: 0;
        background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    I want the same but on the images on witch there is a lightbox link.

    Carosch

    #521066

    Hi!

    Can you please post the link to your page where we can see the elements you would like to adjust? If you would like to apply it to every image overlay, please use the code as following

    .image-overlay .image-overlay-inside:before {
        content: '';
        border-radius: 0;
        background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    Cheers!
    Yigit

    #521095

    Unfortunately that code doesn’t works.

    My goal is to apply this effect on all images that can be enlarged in lightbox.
    Just like linked image, but with another image.

    Perhaps something to do with .lightbox-added?

    • This reply was modified 8 years, 5 months ago by carosch.
    #524219

    Hi,

    someone could help ?

    Carosch

    #525405

    Hey!

    Please try this:

    .avia-image-container-inner .avia_image:before {
        content: '';
        border-radius: 0;
        background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        top: 0;
        left: 0;
        z-index: 10000;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    Best regards,
    Ismael

    #525472

    Hello,

    ok, this code display Kriesi logo over the image
    always
    but how can I do for this result, but only on mouse over ?

    carosch

    #526016

    Hey!

    Replace this line:

    .avia-image-container-inner .avia_image:before 
    

    .. with:

    .avia-image-container-inner:hover .avia_image:before 
    

    Best regards,
    Ismael

    #526490

    Hello,

    it works.
    The only problem is that the effect is not the same like the overlay-type-extern one.

    Carosch

    #527692

    Hi!

    what do you mean? I checked the site in private content and overlay effect is working fine for me.

    Best regards,
    Andy

    #527923

    Hello Andy,

    yes the hover effect works, with a cut effect, but not with the progressive opacity and cubic-bezier animation.
    I wish I had this one, like on this piou-piou picture : http://memorial-verdun.fr/
    Carosch

    #528886

    Hey!

    I checked the website you referred to and can’t see any hover effect and no idea what piou-piou picture means.

    Best regards,
    Andy

    #528899

    Hello Andy,

    If you compare the both piou-piou images with this two links (with the private access I give you previously) :
    http://memorial-verdun.fr/de/le-piou-piou-dessert-national-depose-biscuit-pernot-dijon/
    http://memorial-verdun.fr/
    You can see that the hover effect isn’t the same.
    For the first, il a simple hover effect
    For the second one, the effect is with progressive opacity and cubic-bezier animation

    Carosch

    #529542

    Hi!

    can you explain what you mean with piou-piou images please? I googled it and got this result.

    I checked the websites and there are no images with any hover effect at all for me.

    Cheers!
    Andy

    #529553

    Hello Andy,

    I mean the picture that illustrates the article about the Piou-Piou cookies, the image on which it is written Piou-Piou

    This image (Piou-Piou cookies) can be found in two different places:
    1) Small in the index page (on witch the hover effect is correct)
    and if you clickon it
    2) Bigger, in the article itself (there, the hover effect is not correct).

    Did you consult the website with the private access I give previously?

    Carosch

    #531016

    Hi!

    ok sorry, I looked at your website without logging in and did not see that it was just a maintenance site.

    Add this code to your Quick CSS for the image overlay animation:

    .avia-image-container-inner:hover .avia_image:before {
    animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -webkit-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -moz-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -o-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    }
    

    Hope this helps finally!

    Regards,
    Andy

    #554640

    I applied these same changes on this site: http://www.crestedbuttecomputers.com/dev/unitedstatesfittings/fabricated-crosses/

    however, the image doesn’t stay the same size and increases depending on the size of the image. I don’t want it to increase at all – remain original dimensions or smaller.

    I tried using this code from another site of mine that is working correctly – however this code doesn’t work on the new install:
    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    background-image: url(http://www.alpineorthopaedics.com/wp-content/uploads/2015/06/alpine-orthopaedics.png);
    background-size: contain;
    background-color: transparent;
    background-repeat: no-repeat !important;
    }

    #554646

    Nevermind – I figured it out. Here’s the final code:

    .avia-image-container-inner:hover .avia_image:before {
    content: ”;
    border-radius: 0;
    background-image: url(http://www.crestedbuttecomputers.com/dev/unitedstatesfittings/wp-content/uploads/2015/12/USFittingslogosquare.png);
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    top: 0;
    left: 0;
    z-index: 10000;
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    }
    .avia-image-container-inner:hover .avia_image:before {
    animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -webkit-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -moz-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    -o-animation: avia_pop_small 0.35s 1 cubic-bezier(0.000, 0.980, 0.440, 1.100)!important;
    }
    .image-overlay .image-overlay-inside {display:none;}

    #557007

    Hey!

    glad you figured it out! and thank you a lot for sharing.

    Regards,
    Andy

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘lightobox overlay effect’ is closed to new replies.