Joomla Templates Club 406,261 posts

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#205828

I am using ACM Gallery Style 2 – Animation Hover – Flip
It all works great until the screen is resized responsively and it doesn’t flip anymore.

Any ideas why?

http://matilda.net.au/matjoomla/index.php/apple

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#568506

I’m so sorry about this, I have raised that bug to development team here. Please give them some time to check that bug.

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#568588

Ok no worries – let me know when you get something sorted as I love the flip effect on the gallery and we want to get the site up and finished soon so we don’t drop down google rankings with a site that isn’t mobile friendly!

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#733682

Ok no worries – let me know when you get something sorted as I love the flip effect on the gallery and we want to get the site up and finished soon so we don’t drop down google rankings with a site that isn’t mobile friendly!

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#571745

Any news yet?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#571951

<em>@imatilda 474965 wrote:</em><blockquote>Any news yet?</blockquote>

I’m so sorry about delay to response for you because I could not receive any info from development team, I pinged them again and they told me the effect as on desktop is not supported in mobile layout :((

1 user says Thank You to Ninja Lead for this useful post

1. Leon Cuzzilla

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#572267

Ok, will have to rethink as the images won’t make sense without the words on the flip side! No worries. Thanks

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#737304

Ok, will have to rethink as the images won’t make sense without the words on the flip side! No worries. Thanks

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#575925

Hi –

We are trying to do something similar, and hopefully simple, in mobile. On desktop, the mouse-hover causes the image to ‘flip’. How would we change mobile behavior so one ‘tap’ causes flip?

Thanks,
Kevin

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#642254

Hi –

We are trying to do something similar, and hopefully simple, in mobile. On desktop, the mouse-hover causes the image to ‘flip’. How would we change mobile behavior so one ‘tap’ causes flip?

Thanks,
Kevin

[kjlarski JATC kjlarskiJoin date: October 2010Posts: 96Downloads:3Uploads:6 Thanks: 6 Thanked: 15 times in 1 posts]

#740914

Hi –

We are trying to do something similar, and hopefully simple, in mobile. On desktop, the mouse-hover causes the image to ‘flip’. How would we change mobile behavior so one ‘tap’ causes flip?

Thanks,
Kevin

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#576177

@imatilda: You can fix the problem on your site with the solution below

Open templates/uber/acm/gallery/css/style.css file

find and change


@media (min-width: 992px) {
.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}
}


to


.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}

@kjlarski: You can appear the same above solution on your site.

1 user says Thank You to Ninja Lead for this useful post

1. Nancy Kimball

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#642503

@imatilda: You can fix the problem on your site with the solution below

Open templates/uber/acm/gallery/css/style.css file

find and change


@media (min-width: 992px) {
.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}
}


to


.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}

@kjlarski: You can appear the same above solution on your site.

1 user says Thank You to Ninja Lead for this useful post

1. Nancy Kimball

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#741162

@imatilda: You can fix the problem on your site with the solution below

Open templates/uber/acm/gallery/css/style.css file

find and change


@media (min-width: 992px) {
.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}
}


to


.acm-gallery.style-flip .item:hover .item-image {
transform: perspective(800px) rotateY(-179.9deg);
-webkit-transform: perspective(800px) rotateY(-179.9deg);
}
.acm-gallery.style-flip .item:hover .item-details {
opacity: 1;
filter: alpha(opacity=100);
transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
}

@kjlarski: You can appear the same above solution on your site.

1 user says Thank You to Ninja Lead for this useful post

1. Nancy Kimball

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#576362

ok thanks will give that a go and let you know

[Author]

Posts