-
Posts
-
Hi
i am having trouble in finding the proper CSS to change the hover color of masonry gallery and the size of the hover covering the background image.
This is exactly what i want: http://en.mobis.co.kr/main/index.do (the CSR section)
i want the hover action to solid cover half or 40% of my masonry, with description. The under caption of the images in the example is not important to me.
Is it possible to do such thing with Masonry Gallery?Hey Gsharifi,
Thanks for the link, though I’m not sure I understand what you mean by that. Do you want the white area to be higher maybe? If you could post a screenshot highlighting your intentions it might make things easier for us to understand.
Best regards,
RikardDear 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,
GSharifiHi,
Sorry for the late reply, to have a taller masonry item please try the “High Portrait” Orientation:
to have the blue overlay fill within the masonry item try to place it within the “av-inner-masonry” link this:a.av-masonry-entry:hover > .av-inner-masonry:before { content: attr(title)!important; background: #0D47A1!important; position: absolute!important; bottom: 0!important; left: 0!important; right: 0!important; width: 100%!important; height: 40%!important; z-index: 10!important; text-align: center!important; line-height: 180px!important; opacity: 1!important; font-weight: bold!important; font-size: 24px!important; color: #fff !important; transition: ease-in linear 2s!important; }unfortunately the title attribute is not showing with this though.
To see the element I tried to work on, try Enabling the Avia Layout Builder Debugger and using this shortcode:[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' av_uid='av-jom6vm8p'] <style> a.av-masonry-entry:hover > .av-inner-masonry:before { content: attr(title)!important; background: #0D47A1!important; position: absolute!important; bottom: 0!important; left: 0!important; right: 0!important; width: 100%!important; height: 40%!important; z-index: 10!important; text-align: center!important; line-height: 180px!important; opacity: 1!important; font-weight: bold!important; font-size: 24px!important; color: #fff !important; transition: ease-in linear 2s!important; } </style> [/av_codeblock] [av_masonry_gallery ids='' items='4' columns='4' paginate='none' size='fixed' orientation='av-orientation-portrait-large' gap='large' overlay_fx='active' animation='active' container_links='active' id='' caption_elements='title excerpt' caption_styling='' caption_display='always' color='' custom_bg='' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-jom67uwa']Best regards,
MikeHey 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;
}Hi,
Thanks for the screenshot, I wonder why your blue overlay is so off in your screenshot? Here is the screenshot of the one I worked on:
and this is the same one with your css:
this is not as off as your screenshot, but the blue overlay doesn’t stay in the box it goes down to the next element.
Also is your element inside of another column? That might be limiting it’s size, mine is not and it’s quiet large.Best regards,
MikeHey Mike,
thank you for your prompt reply.
My Gallery is in a color section actually as i a want a background color.
it’s really strange that your CSS did not work at all. Any ideas what i shall do?Kind Regards,
GsharifiHi,
While I was able to make the blue overlay stay within the box, I was not able to get the “content: attr(title);” to work and show the title within the blue box, which I’m sure is important to you.
This might require a little more time & coding than we can achieve here, However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you.Best regards,
Mike
- You must be logged in to reply to this topic.