Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 10, 2015 at 4:43 pm #471585
    Keith

    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 #471753
    Dake

    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

    July 15, 2015 at 6:34 pm #473913
    Keith

    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?

    July 15, 2015 at 6:50 pm #473919
    Dake

    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

    July 15, 2015 at 7:05 pm #473923
    Keith

    Here you go:

    July 20, 2015 at 8:31 pm #476112
    Keith

    Hi Dake, any ideas on the effect? Thanks!

    July 20, 2015 at 8:48 pm #476132
    Dake

    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

    July 20, 2015 at 9:14 pm #476143
    Keith

    Hey 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 #476180
    Dake

    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

    July 21, 2015 at 1:17 am #476239
    Keith

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

    July 21, 2015 at 1:24 am #476241
    Dake

    Hi!

    You’re welcome Keith :)

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

    Best regards,
    Dake

    July 21, 2015 at 2:52 am #476265
    Dake

    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, 3 months ago by Dake.
    July 21, 2015 at 3:17 am #476271
    Dake

    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

    July 22, 2015 at 1:51 am #476819
    Keith

    Hi Dake,

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

    Keith

    July 22, 2015 at 2:21 am #476823
    Dake

    Hi!

    You’re welcome Keith :)

    Glad I could help.

    Cheers!
    Dake

  • Author
    Posts
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.