Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #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!

    #471753

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

    #473913

    Thank 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?

    #473919

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

    #473923

    Here you go:

    #476112

    Hi Dake, any ideas on the effect? Thanks!

    #476132

    Hey!

    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!
    Dake

    #476143

    Hey Dake, I include the ip for a hosts file change to skip the live site. Instead try this staging site:

    #476180

    Hey!

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

    #476239

    That’s perfect. Thanks for all of your help Dake!

    #476241

    Hi!

    You’re welcome Keith :)

    Please let us know if you ever need any help in the future.

    Best regards,
    Dake

    #476265

    Reopened 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!
    Keith

    Hey 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, 5 months ago by Dake.
    #476271

    Hi!

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

    #476819

    Hi Dake,

    Your solution + the color sections will work great. Thanks again for your help.

    Keith

    #476823

    Hi!

    You’re welcome Keith :)

    Glad I could help.

    Cheers!
    Dake

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Masonry Grid – On Hover Sheer Color with Title and Caption’ is closed to new replies.