-
Posts
-
Hey!
Is it possible to create a sort of hover state for the mobile version of the masonry gallery?
This is the css i’ve used so far to create an white semi-transparent image-overlay and text on hover: (this only works on desktop unfortunately). I know its possible to create such hover on mobile devices. Can you help me with this?
/* ———————— Masonry Gallery ———————————*/
.avia_desktop .av-hover-overlay-active .av-masonry-image-container {
opacity: 1;
}
.avia_desktop .av-hover-overlay-active .av-masonry-entry:hover .av-masonry-image-container {
opacity: 0.7;
}
.av-masonry-entry:hover .av-inner-masonry-content{
opacity: 0.8 !important;
}
.av-masonry-entry .av-inner-masonry-content {
height: 101%;
text-align: center;
display: table;
opacity: 0 !important;
}
.av-inner-masonry-content-pos {
vertical-align: middle;
display: table-cell;
}
.av-masonry-entry .av-masonry-entry-title {
line-height: 1.3em;
margin: 0;
font-size: 25px;
}Thanks a lot!
Greetz,
Lara
Hi lara!
As far as I’m aware the hover state will only work on devices which has a pointer/mouse, hover will be ignored on devices you tap on since that will be interpreted as a click. I might be missing your point here though?
Best regards,
RikardHello,
I’m aware there’s no such thing as a hover on a touch device by default. But maybe its possible to simulate some animation or add support for hover events when the user touch these elements on any touch enabled device by use of minimal javascript and css. There is a feature on touch devices called double tap for instance.
This is the situation:
I have a picture in my masonry gallery. When I hover the picture on the desktop, a slightly transparent overlay with a centrered text appears.
When I click the picture on my Iphone, or Ipad, it opens a new page immediately. After returning to the masonry gallery, the clicked picture gets its slightly transparent overlay with a centrered text.Ideal situation would be: seeing the masony picture on my mobile device. Click the picture once to see the overlay with a centrered text, click the picture triggers the link to the next page.
I really would like for the touch users to experience something close to that of the desktop users! I hope there’s a solution for this. Unfortunately I’m not able to find it, maybe you can help me with this.
Thank you so much for your time.
Greetz, Lara
Hi!
I don’t think there’s an easy way to simulate hover state on mobile devices but they say using the :focus state will work: https://css-tricks.com/forums/topic/click-function-for-hover-states-on-touch-devices/
Unfortunately, this will require modifications that is beyond the scope of support. You can contact Codeable.io to help you: http://kriesi.at/contact/customization
Cheers!
IsmaelHi!
Thanks for your answer. I have one last question: why the hover ( overlay and text ) works after I clicked and follow the link on the mobile device, and then return to the masonry gallery ?
I mean, if I check my masonry gallery, there is no overlay and text visable. When i click the photo to follow the link to another page and then return to that photo in the masonry gallery, the clicked image does suddenly have an overlay. Is it a lot work for you to explain how this is possible?Greetz,
Lara
Hey!
I’m not entirely sure what you mean but that is most likely the :active or :focus CSS state you are seeing.
Best regards,
Rikard
- The topic ‘Mansory hover on mobile device’ is closed to new replies.