Hey Mike!
Thank you for your reply.
The setting is already on high portrait. I wanted it to be higher.
Unfortunately the hover CSS did not work. I had to change it back to my code that is not working as i want it to.
I post the result and the code once more:
.av-masonry-entry:before {
content: attr(title);
background: #0D47A1;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 95%;
height: 40%;
z-index: 500;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;

}

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

.av-masonry-entry:before{
transition: all linear 0.2s;
}

Link:
https://i.postimg.cc/tCGDQWKh/issue.jpg

Dear Rikard,
Thank You for the reply.
This is the CSS i am using right now:
////////////////////////////////////////////////////////
.av-masonry-entry:before {
content: attr(title);
background: #0D47A1;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 95%;
height: 40%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
}
.av-masonry-entry:hover:before {
opacity: 1.0;
}
.av-masonry-entry:before{
transition: all linear 0.2s;
}
/////////////////////////////////////////////////
In the Gdrive (link in private) I uploaded the screen shots of what I have now, and how I want it to be.

What is want:
1. The height of Masonry to be higher
2. The white frame that is under each of the columns as a Caption.
3. The hover action, which actives description text to be displayed and also the solid blue cover.
3.1 as you can see in my CSS code (width: 95%;), and the result in the screen shot, the hover solid color in my website is a bit outside of the frame of the Masonry Border. How can the solid blue cover be the same width as the Masonry.

sorry for the long explanation.

Kind Regards,
GSharifi

i’m sorry that you think i’m advice-resistant. The plugin you mentioned didn’t work well with persian fonts. The body did not change, although i assigned the font to body text and some other elements.
thank you for your advice though.

Hey Guenni.
I’ve tried all of the things you said. still no luck.
some converters find the family as “iransans” some other find it as “iransanweb-light” or even “iransansweblight”.
No luck with any of them.
BTW the files were both in enfold root directory and a folder named “fonts” no luck with any of them.

well i think you are not familiar with Persian fonts, Guenni. That’s why you cannot recognize, which font i am expecting to show up.

Hey Guenni i tried it in style.css, no luck.
edited the urls commas. still no luck.
also tried the absolute path too. still no luck.
Any idea?

Hey John
Here it is: