Hi Ismael,

I needed horizontal align, so I added to

.av-masonry-entry:before {
left: -2.5%;

which shifts title a bit to the left as it’s still aligned to outer box.

Done for now. Thank you for all your help!

Cheers, Alan

Hello Ismael,

Thank you for a quick reply!

I inserted your code after current one so now it looks like this:

/* 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: relative;
}

1. Black background now looks good as it covers only the image, but it’s always on instead of showing up only on hover state as the title.

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

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 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,

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,

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

Thank you Vinay,

I changed in your code text size and transition to 0.4s.

1. Is it possible to dead 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. When I rollover the image title font starts as black and then fades into a blue. Is it possible for title text to start as 0% opacity and then to 100% opacity as it is now, and where can I change that blue color?

Cheers, Alan

Hi Vinay,

Thanks for providing enfold masonry examples. Unfortunately they don’t work well on my touch pad. On your masonry example animation 1 it seems to be stuttering a bit and it’s not seamless. Also, when you’re going over gallery images with that code sometimes it click on the image right away instead of just showing a hover state with the title which is my goal. Then when I touch hard (click) it goes to desired section.

So again, is it possible for you to edit this existing code which perfectly hovers/animates/clicks my gallery:

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

… and at the same time.

1. Make black image highlight overlay the same size as image, and not bigger as it is now.
2. Separate the title and black overlay, so that I can make title 100% opacity on hover.
3. I added excerpt to the first image on the gallery, so it would be nice for it to display as well.

I really appreciate all your help.

Cheers, Alan

Hi Victoria,

Apartments are the products which can be added to the cart. If you go to Rental Listings and click on the first apartment, Firenze2 1Br & Den Apt. Then click on the Choose button to pick the dates, but selected dates have to be more than 30 days. To add to cart click on Check Availability button.

After if you wish to remove that product from the cart, click on the cart icon to get inside the cart and then click on the little blue x symbol besides the product picture to remove it.

Thank you, Alan

Hi,

I was using fixed frame, and when changed it to stretched layout the frame disappeared.

Problem solved, thank you!

Alan

Hi there,

I thought & g t ; would work, but I guess after refreshing several times and the next day I realized it’s not working again.

Will try using martin_e83 tip for “»” instead of “>”, however it’s not the same. All websites out there for more info or shop buttons are using “>” character. For such a widely used enfold theme I’m sure many people had the same issue, so I hope enfold team will look into it and fix it in the next theme update.

Cheers, Alan

Hi there,

1. Yes, the quote for my main and mobile menus was the problem and now works fine. Thanks :)

2. However #top css selector which should change font on my whole site to akkurat_lightregular:

#top {
font-family: 'akkurat_lightregular';
}

works fine only my pc on IE and Chrome browsers, but not on my iphone and ipad.

My website: http://www.vancouverforliving.com

Thanks, Alan

Hi there,

Unfortunately generic body code you suggested doesn’t work for me.

My original codes for replacing whole website font with one font and replacing main menu + mobile hidden menu with another font are working fine.

If anyone needs it here is the whole code:

@font-face {
font-family: ‘akkuratregular’;
src: url(‘fonts/akkurat_regular-webfont.eot’);
src: url(‘fonts/akkurat_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/akkurat_regular-webfont.woff2’) format(‘woff2’),
url(‘fonts/akkurat_regular-webfont.woff’) format(‘woff’),
url(‘fonts/akkurat_regular-webfont.ttf’) format(‘truetype’),
url(‘fonts/akkurat_regular-webfont.svg#akkuratregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘akkurat_lightregular’;
src: url(‘fonts/akkurat_light_regular-webfont.eot’);
src: url(‘fonts/akkurat_light_regular-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/akkurat_light_regular-webfont.woff2’) format(‘woff2’),
url(‘fonts/akkurat_light_regular-webfont.woff’) format(‘woff’),
url(‘fonts/akkurat_light_regular-webfont.ttf’) format(‘truetype’),
url(‘fonts/akkurat_light_regular-webfont.svg#akkurat_lightregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

#avia-menu {
font-family: ‘akkuratregular’;
}

#mobile-advanced {
font-family: ‘akkuratregular’;
}

h1, h2, h3, h4, h5, h6, p {
font-family: ‘akkurat_lightregular’;
}

If anyone can suggest anything to clean up or improve this code don’t be shy and contribute ;)

Cheers, Alan