Image animation - Support | Kriesi.at - Premium WordPress Themes

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

Author

Posts
May 12, 2014 at 3:14 pm #263292

patrickschua
Participant

Hi,

Is there anyway that the mobile version can display something similar here –

https://www.dropbox.com/s/ttlfqocynb7eaw7/Screenshot%202014-05-12%2020.18.30.png

Thank you.

May 13, 2014 at 8:09 am #263778

patrickschua
Participant

I meant the round animation when you hover your mouse into the image?
Thanks.

May 13, 2014 at 11:18 pm #264310

Yigit
Keymaster

Hey!

Please see – http://kriesi.at/documentation/enfold/disable-css-overlay-on-images/

Best regards,
Yigit

May 14, 2014 at 7:39 am #264515

patrickschua
Participant

Hi Yigit,

I wanted it to be enabled when viewed using a mobile device.

Thank you.

May 14, 2014 at 12:28 pm #264596
Yigit
Keymaster
Hey!

Please change the code to following one
```
@media only screen and (min-width: 990px) {
.image-overlay {
 visibility: hidden;
 }}
```
Best regards,
Yigit
May 14, 2014 at 12:40 pm #264599
Flikk
Participant
I guess your are looking for
```
.image-overlay {
 visibility: visible !important;
 }
```
But that should not be needed. do you have a link to you site with an example?
The overlay should be allways activated, even on small screens.
May 14, 2014 at 1:35 pm #264624
Yigit
Keymaster
Hi!

My bad, please add following code to Quick CSS instead
```
@media only screen and (max-width: 990px) {
.image-overlay {
opacity: 0.6 !important; }}
```
Regards,
Yigit
May 19, 2014 at 1:56 pm #266796

patrickschua
Participant

Hi Yigit,

Thank you for the support. Where do I add those lines of code?

May 19, 2014 at 1:57 pm #266798

Yigit
Keymaster

Hey!

To Quick CSS field in Enfold theme options > General Styling tab

Regards,
Yigit

May 23, 2014 at 3:50 am #268975

patrickschua
Participant

Hi Yigit,

I tried the above solution but whenever I still use my iPhone to browse, I still don’t see the beautiful animation.

Hope you can help. Thank you.

May 23, 2014 at 12:45 pm #269097

Yigit
Keymaster

Hi!

Have you flushed browser cache on your mobile device after applying the code? Can you post the link to your website so we can take a look?

Cheers!
Yigit

May 26, 2014 at 11:26 am #269995

patrickschua
Participant

This reply has been marked as private.

May 28, 2014 at 6:56 pm #271344

Devin
Inactive Moderator

Hey!

Mobile and touch browsing doesn’t have a hover state. At best it will do a first touch for hover, second touch for activate. For css effects it would then be up to the browser and device to animate it or not.

Regards,
Devin

May 29, 2014 at 1:06 pm #271748

patrickschua
Participant

This reply has been marked as private.

June 2, 2014 at 8:55 pm #273494
Josue
Inactive Moderator
Hey!

Try adding this code to the Quick CSS:
```
a:focus .image-overlay .image-overlay-inside{
    -webkit-animation: avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Safari 4+ */
    -moz-animation:    avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* Fx 5+ */
    animation:         avia_pop_small 0.5s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275); /* IE 10+ */
}

.avia_transform a:focus .image-overlay{
    opacity: 0.7 !important;
}
```
Cheers!
Josue
June 16, 2014 at 1:53 pm #279417

patrickschua
Participant

Hi Josue,

Still no luck with the animation using mobile safari for ios.

June 21, 2014 at 9:26 am #281939
Josue
Inactive Moderator
Hi,

Try with this code instead:
```
.avia_transform a:active .image-overlay{opacity: 0.7 !important;}
```
That should make the arrow appear when the image is tapped.

Best regards,
Josue
June 21, 2014 at 9:52 am #281949

Ismael
Moderator

Hi!

Thank you for the update.

I’m not sure if the image overlay function can work properly on mobile devices since the hover feature works differently and somehow slow downs the click event. That’s why Kriesi disabled it for mobile devices. You might need to investigate this particular issue on your own or hire a freelance developer to modify the overlay function. Please visit Envato Studio or Werkpress for further customization. You can also vote or post the feature on our Feature Requests page.

Cheers!
Ismael
Author

Posts

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

You must be logged in to reply to this topic.