1

I'm working on this page - https://careers.clydemunrodental.com/our-clinical-team/ and I'm using the divi blog pro plugin with the module DP Post Masonry Grid.

I want a button to appear when I hover over the featured image, like on this page https://clydemunrodental.com/about-us/our-senior-team/ - when you hover over the image, a 'view profile' button appears, and links through to the profile. I've tried a bunch of different ways, but because the featured image isn't it's own element, I can't add a class/ID to it. At the moment, I have a 'view profile' button in place of the read more button, but I want it on the image and only visible on hover. At the moment, I have the button appearing on hover, but only when the button is hovered (which is easy to miss because you have to be in the center of the image for it to show up) - I'd like the image to have a slight white overlay, and the button to appear on hovering of the image.

Any suggestions on how I can achieve this would be welcome!

Improve this question
1
  • This might be a dumb question but why aren't you just using the same method that already works from the Senior Team page for the Clinical Team page? You can probably cobble something together with CSS but if you already have a working version why not just go with that?
    – Tony Djukic
    Commented Apr 29 at 17:05

1 Answer 1

Reset to default
0

Using CSS, you can try just moving the 'hover' state a bit higher up the chain.

.brbl-blog-item:hover .brbl-overlay{
    /*Theme has this set to `transparent` so change to 70% white*/
    background: RGBA(255,255,255,0.7);
    z-index: 1;
}
.brbl-blog-item:hover .brbl-post-btn{
    opacity: 1;
    z-index: 10;
}

This does mean that the entire item including the content is subject to the hover, but most people will just hover over the image anyway. It's a bigger target. This should give you the same effect but you can work on the level of opacity for the background colour and fine tune that as needed.

Improve this answer
3
  • Ah I think that's where I got to and it wasn't working with the theme I'm using, think it might be to do with the classes and identifiers. I'll look into it - thank you! Also in response to your comment - I didn't build the other website and it's built in a very different way and using a different theme, so I can't just lift the layout unfortunately.
    – poppythewitch
    Commented Apr 29 at 17:31
  • I didn't realize that you didn't have access to both - I assumed since the domains were the same that it was all related and you had access. Apologies. The CSS in my answer here works fully when I added it via developer tools in my browser.
    – Tony Djukic
    Commented Apr 29 at 17:36
  • No problem - I have access to both but didn't build the first one, and it's built using a theme I don't have experience with. I'll try the CSS - thank you!
    – poppythewitch
    Commented Apr 29 at 17:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.