Responsive height for state buttons

[tomasp81485507]

Hi, I am in the process of creating a homepage with images that when hovered will show some information. I want to make the site responsive for all devices but because I need to place the button over an image, the height messes everything up. I've tried placing a rectangle over the top of the image and using the fill option over the rectangle to put the text as an image itself, but that is not good enough. If anyone has any other suggestions I would greatly appreciate it.

Here are some screenshots:

This is the original page followed by how it looks when hovered, followed by the problem with the button.

[Günter Heißenbüttel]

This is possible.

Look at this:

Restrictions:

• If you have longer text, so that there will be a line break, when the browser window resizes smaller, the text box will grow vertically and push down the images below. (That is a HTML convention). In this case you have to create a breakpoint and change the text size and/or reposition the text frames in this new breakpoint.
• The text frame has to be lined up with the top edge of the state button, otherwise the synchronous shifting of text and underlying image will be disturbed.

If you can’t live with these drawbacks, create a „text image" with the same as your background image and place it into the state button exactly onto the background image. Best practice: Use SVG format, so that the text remains crisp, when placed.

Here you can download the associated .muse file: https://www.dropbox.com/s/y9nye6w4u5jysqr/Image-grid-with-hover-text.muse?dl=1