Tagged: masonry grid
-
AuthorPosts
-
July 10, 2015 at 4:43 pm #471585
I’d like to create a hover effect like the grid of images on this page with the Enfold Masonry Grid – http://www.wideeyecreative.com/
Any advice?
Thank you!
July 10, 2015 at 11:01 pm #471753Hi Keith!
The effect is actually possible by performing some lengthy css changes to the current Masonry Grid tool with the overlay disabled and “Element Title and Excerpt” set to “display on mouse hover”.
Right now the zoom effect is enabled by default, so you would need to apply a blue background-color (or similar) with an opacity setting of about 0.5 to the thumbnail container (on hover).
For example:
.av-fixed-size .av-masonry-outerimage-container:hover { position: absolute; background-color: #509DE1; opacity: 0.5; }
The title and excerpt positioning can be altered using the below class group:
.av-masonry-entry .av-masonry-entry-title { line-height: 1.3em; margin: 0; font-size: 50px; color: #fff; }
Finally the default background that appears on hover can be removed with the below:
.main_color .container .av-inner-masonry-content {
background-color: transparent;
}That is the gist for css. The font can be changed using a webfont tool of your choice.
.
Best regards,
DakeJuly 15, 2015 at 6:34 pm #473913Thank you for your help Dake.
I am not able to get this to work. I set the masonry grid tool to as you specified and added this code to quick css:
.av-fixed-size .av-masonry-outerimage-container:hover { position: absolute; background-color: #509DE1; opacity: 0.5; } .av-masonry-entry .av-masonry-entry-title { line-height: 1.3em; margin: 0; font-size: 50px; color: #fff; } .main_color .container .av-inner-masonry-content { background-color: transparent; }
The Masonry Gallery does not change, still a flip up white section with caption. The Masonry tool from the Content section has the same flip up white with not text.
Thoughts?
July 15, 2015 at 6:50 pm #473919Hey Keith,
May I have temporary access to your website to take a closer look at your settings?
Be sure that any credentials you include are in the private content section.
Best regards,
DakeJuly 15, 2015 at 7:05 pm #473923Here you go:
July 20, 2015 at 8:31 pm #476112Hi Dake, any ideas on the effect? Thanks!
July 20, 2015 at 8:48 pm #476132Hey!
I accessed the site, but I’m not seeing any clear signs of the masonry grid or anything pertaining to wordpress.
This is what I am seeing:
http://i.imgur.com/WViICy6.png
Cheers!
DakeJuly 20, 2015 at 9:14 pm #476143Hey Dake, I include the ip for a hosts file change to skip the live site. Instead try this staging site:
July 20, 2015 at 10:57 pm #476180Hey!
The blue effect has been assigned to the http://incite.staging.wpengine.com/dake/ (hosted on WPengine) test page.
As stated above, you can apply the effects and styling to a scpecific page or all pages that contain masonry grids.
Best regards,
DakeJuly 21, 2015 at 1:17 am #476239That’s perfect. Thanks for all of your help Dake!
July 21, 2015 at 1:24 am #476241Hi!
You’re welcome Keith :)
Please let us know if you ever need any help in the future.
Best regards,
DakeJuly 21, 2015 at 2:52 am #476265Reopened on request:
Hey Dake, I had a follow up question to the topic from earlier today but the topic is closed. I’m happy to post this over that topic if you want it all in on place.
https://kriesi.at/support/topic/masonry-grid-on-hover-sheer-color-with-title-and-caption/
Is there a way to only change the background color of the masonry gallery? I’d like the page background to be white but still have the blue hover effect that you created. I tried changing the background color of the gallery but it still used the underlying page background color.
Thanks!
KeithHey Keith!
The effect was actually performed using a work around.
I’ll look into it another method. But at this point we would usually recommend a dedicated freelancer to perform extensive customization.
I reopened the previous thread so this can be closed.
Regards,
Dake- This reply was modified 9 years, 3 months ago by Dake.
July 21, 2015 at 3:17 am #476271Hi!
You can actually use a color section with a white background to overlap the blue background.
Again this is a work around that only applies to this page until you change the page-id in the custom css.
Regards,
DakeJuly 22, 2015 at 1:51 am #476819Hi Dake,
Your solution + the color sections will work great. Thanks again for your help.
Keith
July 22, 2015 at 2:21 am #476823Hi!
You’re welcome Keith :)
Glad I could help.
Cheers!
Dake -
AuthorPosts
- The topic ‘Masonry Grid – On Hover Sheer Color with Title and Caption’ is closed to new replies.