Enfold Masonry gallery image hover rollover for tablets ipads smartphones

Hi Vinay,

Please do whatever you need to to make it work properly.

I don’t really know what I’m doing.

Thank you, Alan

Hi Vinay,

Now I remembered why I had that previous code and I deactivated overlay from masonry element options. It’s because this overlay doesn’t work with my ipad/iphone. With activated overlay it’s always in hove state.

What code can I use with activated overlay as you have it now to work the same way on desktop, tablets and smart phones?

Thank you, Alan

Hi Vinay,

Of course, I want the same hover feature across all platforms and devices.

What code I can use to achieve that?

Thanks, Alan

Hi Vinay,

Here is where I got the original code where hover state works with deactivated overlay from masonry element options:
https://kriesi.at/support/topic/masonry-portfolio-hover-colour-and-centre-title/

I know you said it this might cause me some problems down the road, but it works beautifully across all platforms and devices in this masonry gallery which is discussed in the same thread:
http://peacheyphotography.co.uk/

Thank you for all your help!

Alan

Hi Vinay,

I extended temporary login by another week.

I put in the code you gave me and there are a several tweaks I need done to make it perfect, as not this code works fine on all platforms and devices.

1. Is it possible to horizontally center title as now it seems to be a bit to the right. I think title is now still lining up to previous oversized black hover overlay.

2. Is it possible to fade in 0.4s that black overlay, same as the text.

3. Is it possible to show excerpt below the title as on the screencap link below.

Cheers, Alan

Hi Vinay,

1. Great, the title in now centered and I moved it up to top: 25% to give some room to Excerpt text.
2. However there is no black 50% opacity 0.4s fade on/off on hover on my end. No black across all devices and platforms; desktop or ipad and iphone. I cleared my history and cache.
3. To make Title and Excerpt work is it possible to make fixed Excerpt position to always show below Title. If title is at top: 25% vertical position, I guess Excerpt would be fine at top: 60% vertical position.
4. Excerpt fades on/off on hover just fine on my desktop, but it’s always on on my ipad and iphone. is it possible for excerpt to fade in/out the same as title on my ipad/iphone, as title fades on/off just fine.

Thank you Vinay for all your help.

Best regards, Alan

Hi Vinay,

2. I’m as well using on my desktop Chrome and on ipad/iphone FireFox but black 50% opacity background on fade in/out is not showing. Cleared history and website data as well.

Again this original code from the beginning of this thread shows black background perfectly when hovering over, so if there is a way of combining it with your current code that displays just title very nicely:

.av-masonry-entry:before {
content: attr(title);
background: black;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
transition: all linear 0.2s;
}
.av-masonry-entry:hover:before {
opacity: 0.5;
}

3-4. I understand there could be issues if you’re customizing Masonry gallery and then all other Masonry galleries would work to that customized way. But can’t only this gallery be customized with custom ID Attribute?

If you can’t help me any more that’s fine, you can close this thread.

Thank you for all your help I really appreciate all your hard work.

Best regards, Alan

Hello Victoria,

Sure, I would like for someone to address and help me resolve my original question.

“Hi there,

I’ve been researching your forum and playing with this all day, and I got a code that’s working but need your help to make it perfect.

1. When I touch gallery image on my ipad it shows black image highlight that’s bigger than just image.
I need black overlay shape to be the same size as image alone.

2. Title is transparent and same opacity as black overlay.
I need title to be at 100% opacity.

3. Also, is it possible to display on rollover any other text besides a title alone. Like subtitle or any other text as a description that I would like to include below existing title.

This is a code that I have in my Quick CSS:

.av-masonry-entry:before {
content: attr(title);
background: black;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
transition: all linear 0.2s;
}

.av-masonry-entry:hover:before {
opacity: 0.5;
}

Also in Masonry Gallery Content I have Overlay deactivated and not displaying element captions.

Thank you for your help.

Cheers, Alan”

If too difficult no need to resolve 3rd point about showing extra (excerpt) text.

Thank you, Alan

Hi Ismael,

I played with the code you gave me and come up with this one that finally works with my masonry across all platforms and devices (with deactivated overlay in masonry, because activated masonry doesn’t work on ipad/iphone) the way I wanted:

/* Masonry overlay */

.av-masonry-entry:before {
content: attr(title);
color: #FFF;
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 20px;
transition: all linear 0.2s;
}
.av-masonry-entry:hover:before {
opacity: 1;
}
.av-masonry-entry .av-inner-masonry:before {
content: ”;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
display: block;
z-index: 100;
position: absolute;
transition: all linear 0.2s;
opacity: 0;
}
.av-masonry-entry:hover .av-inner-masonry:before {
opacity: 1;
}

If you could be so kind and let me know how to:

2. Also I would like to center titles horizontally as now it’s centered to outer box of masonry-entry instead of inner-masonry. Vinay managed to center it up in it’s latest code, but for a life of me I can’t figure it out and implement it with current code.

I really appreciate your help. Thank you very much!

Cheers, Alan