How to create image with overlay text on image?

[juryk]

I have an old website I am converting to wordpress. on the home page there is an image that looks like this:

When you hover it fades to light and has text like this:

How can I implement this in cornerstone on a image?

I have link the original site and my themeco installation in a secure note

[jade]

Hello @juryk,

You may use the column, row, or section setting for this and set the image as the background image then add a text element to the column.

Then you can add a top and bottom padding to the column so that there will be a space around the column content.

Hope this helps.

[juryk]

Thank you, how do I make the content only appear on hover?

[friech]

Hi @juryk,

Did you follow Jade’s instructions above? I don’t see your images as being the Column’s background, thats the first step, the Images needs to be a Column’s background.

Then to have that overlay button to appear on hover, please do this:

• Set your image as the Column’s background, like Jade’s instruction above.

• Put a Button element inside the Column.

• Set the Button’s width to 100% and a define height (e.g. 500px), the height is up to you how tall do you want that column to be, on your live site it’s about 425px.

• 
  
  
  

• Then the hover trick, on the Button’s background-color option, set the Base color to a transparent, and then on the Interaction, make it a solid white, or a bit of transparency if you want a translucent effect on hover.

• 
  
  
  

• Then lastly on the Button Text option, make the base color transparent and the interaction as black. You can then now style the text as you like (font-size, font-family-font-weight, etc.)

• 
  
  
  

Hope it helps,
Cheers!

[juryk]

Thank you! That does help a lot, I was able to implement it. But I do have some questions, I wanted to match the text sizing of the column header next to it. However the sizing is very different to make them look similar.

Here is the hove button text size, 3.5em

but the left column text is 1.8em

Also on mobile the button text is cut off at the end.

How do I make sure it sizes appropriately there? Also how can I make the hover state, the base state for mobile only?

[nabeel]

Hey @juryk,

The sizing is different because the link you have in the right column is wrapped in <h1> tag and default theme styling is also being applied to the <h1> tag.

I’d recommend you to use the Responsive Text feature to properly scale up/down according to the screen size. To do that please follow this thread Mobile view - not size responsive

Since there are no hover events for touch devices so you cannot create the hover state for mobile devices, what you can do is to show the button text by default in mobile devices using media queries and custom CSS which is regretfully outside of our support scope. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg

Hope this helps!

[juryk]

Thanks, Im having an issue with the button below the ‘Studio’ Link. The solution for the column in the first row does not work as in this Row 2 - Column 1 actually needs two separate elements: The Studio headline text, and below it the hover over image, but the image should only cover this second button in the column.

I’ve been trying to come up with a solution and presently I have sort of found one, which basically anchors the background image to the bottom of the column, however once the browser window is resized the button maintains the size while the background image shrinks.

I would appreciate it if you could take a look and see what I am doing wrong here.

To clarify I am trying to mimic the function found at https://summerhousehawaii.com/sh/

Thank you!

[jade]

Hey @juryk,

What you can do for the Studio and Contact links is that you can add a Row Element to the column that contains them:

Then add the text element for the Studio link in the top sub column then apply the same process to the column below it like what you did for the Philosophy column.

Hope this helps.