lightobox overlay effect - Support | Kriesi.at

Viewing 20 posts - 1 through 20 (of 20 total)

Author

Posts
October 19, 2015 at 4:14 pm #521027

carosch
Participant

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

October 19, 2015 at 4:51 pm #521044

Yigit
Keymaster

Hey carosch!

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

Cheers!
Yigit

October 19, 2015 at 5:14 pm #521061
carosch
Participant
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
October 19, 2015 at 5:18 pm #521066
Yigit
Keymaster
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
October 19, 2015 at 5:51 pm #521095
carosch
Participant
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 9 years, 2 months ago by carosch.
October 24, 2015 at 12:55 pm #524219

carosch
Participant

Hi,

someone could help ?

Carosch

October 27, 2015 at 11:08 am #525405
Ismael
Moderator
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
October 27, 2015 at 1:15 pm #525472

carosch
Participant

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

October 28, 2015 at 11:46 am #526016
Ismael
Moderator
Hey!

Replace this line:
```
.avia-image-container-inner .avia_image:before 
```
.. with:
```
.avia-image-container-inner:hover .avia_image:before 
```
Best regards,
Ismael
October 29, 2015 at 1:42 am #526490

carosch
Participant

Hello,

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

Carosch

October 30, 2015 at 9:06 pm #527692

Andy
Inactive Moderator

Hi!

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

Best regards,
Andy

October 31, 2015 at 4:01 pm #527923

carosch
Participant

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

November 2, 2015 at 11:34 pm #528886

Andy
Inactive Moderator

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

November 3, 2015 at 12:44 am #528899

carosch
Participant

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

November 3, 2015 at 6:20 pm #529542

Andy
Inactive Moderator

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

November 3, 2015 at 6:31 pm #529553

carosch
Participant

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

November 5, 2015 at 5:47 pm #531016
Andy
Inactive Moderator
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
December 17, 2015 at 8:52 pm #554640

ewingmh
Participant

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;
}

December 17, 2015 at 9:00 pm #554646

ewingmh
Participant

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;}

December 23, 2015 at 3:57 pm #557007

Andy
Inactive Moderator

Hey!

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

Regards,
Andy
Author

Posts

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘lightobox overlay effect’ is closed to new replies.