Hover Over Image with Text

Hello there,
I am redesigning our current site utilizing X-Theme and wanted to see if it were possible to achieve what is displayed on this link

under the people section with the hover-over on the team images with the orange overlay and white text description. Is this achievable in X-theme?

http://dc7.ab3.myftpupload.com/frontpage-2/?cornerstone=1

user name is Landon, PW is Taylor99

1 Like

I am looking to do the same thing, hope there is a solution for it.

Hi Both,

This can be easily achieved with the essential gird plugin that comes bundled with cornerstone.
It comes with many different skins and overlays that are easy to modify and the display grid is also mobile responsive.

Hope this helps.

Hey There,
Thanks you for responding. This is perfect. I’ve been trying to customize Buchanan to have a description for the image and to change the link icon to an envelope and have that click to mailto:@email. Is there a way to do this?

Hey There,
Thanks you for responding. This is perfect. I’ve been trying to customize Buchanan to have a description for the image and to change the link icon to an envelope and have that click to mailto:@email. Is there a way to do this?

Hi,

Can’t say I’ve ever done that but will try and help.With regards to adding description this will depend on how you have set up your source settings.

If your grid is pulling the images from posts or pages (meaning your post or pages have featured images set) then in essential grid skin editor you can add a ‘new layer’ (you can use the text style presents) set the source to page or post and then set the ‘Element’ to ‘Excerpt’. You will now be able to add animation to this layer, such as fade in, and you can control the text that is displayed by going to the post or page it is pulling from and edit the ‘excerpt’ section which is below the main editing window:
https://www.themepunch.com/essgrid-doc/item-skin-editor/#add-remove-layers

With regards to the mail to; you might be able to add this in the page/post excerpt as it accepts html so add your image and link or you can setup custom meta for each grid item and control this independently form the page it is pulling the content from:
https://www.themepunch.com/essgrid-doc/custom-meta-data/

I hope you find this info useful.

Here is a site I have build in cornerstone using essential grid:

Hello thank you so much for responding. I really appreciate it. All I honestly want to be able to attain is the same styling and feature as the people section on our current site that our previous designer developed, who we can’t get in contact with. Please find it here. Simple photo with a color over lay on hover with an animated text reveal https://www.wearetaylor.com

Hi,

I may be able to offer some customisations for you as long as you can provide me with admin login details.
Please send me an email to nate@citizenclick.co.uk and I would be more then happy to help.

kind regards,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.