Hover overlay with stylized text

Support
#1

Hello,
I had posted a question like this 10 days ago but I replied too late and the thread was closed. I would like to have an image with a hover overlay of text and a headline as shown on this site: https://sihope.org/faces-of-hope.html.
The previous reply was helpful as he showed me how to do it with a video here: https://www.dropbox.com/s/f7st36vkqguvld5/Images%20with%20hover%20overlay.mp4?dl=0
I see I can add secondary text to the button but I am unable make that disappear on hover as the primary text does. I would also like to have the primary text styled differently than the secondary text. ie font size and color. Am I able to style the primary button text with bigger font size and color as shown in the attached screenshot? If not, is there a different way to go about this?Screen-Shot-2020-07-17-at-4.38.52-PM

Thank you

#2

Hello Jennine,
Thanks for writing to us.
You can try our extension plugin called Essential grid. Please check out the documentation so that you can set your desired layout https://www.themepunch.com/essgrid-doc/item-skin-editor/.

Please check our “Essential grid” documentation so that you can properly use it with our theme https://theme.co/docs/essential-grid.
If you need any help after reading through our documentation feel free to reach out at any time.
Thanks

#3

hello,
Thank you for your response. I dont see the classic essential grid element to drop into cornerstone as shown in the documentation. Should I use raw code? Please advise. Thank you

#4

Hello @Jennine,

Please make sure that Essential Grid plugin is installed and active. And then go to X > Settings > Permissions > Classic Elements and make sure that the Essential Grid is enabled as well.

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: How The Forum Works

image
image1040×250 17.4 KB

Best Regards.

#5

Hello,
Thank you for your response. I would like the pointer hand to show when scrolling over the link. Right now its just an arrow or a cursor. Also, The font is different depending on whether you open it in safari or chrome.


Thank you
#6

Hey @Jennine,

Thanks for providing the URL. The items in your grid aren’t links though.

Please edit the skin of your grid. We previously provided the documentation link. Here it is again https://www.themepunch.com/essgrid-doc/item-skin-editor/.

image
image1039×405 20.1 KB

Once you turned your layers to a link and it doesn’t help, please provide the information we requested previously.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks.

#7

Thank you, that worked for the links. But the fonts are still different in chrome and safari. Do you know why? Thanks

#8

Hello @Jennine,

It seems that Open Sans is not loading on the page. Please check out the following Essential Grid documentation to know how you can use custom font for your grid.

Best Regards.

#9

I see that I can make the text a link but what I would like is for the entire box to be a link upon hover so wherever the user hovers they understand it is a link. Is this possible? Thank you

#10

Hey @Jennine,

Please edit your grid skin and in the Layout Composition, make sure to add the Link.

maLptomrSiWvE53rh9jBCw
maLptomrSiWvE53rh9jBCw695×521 14.1 KB

To learn more about how you can edit the grid skin, check this out:

#11

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