Highlighted

Responsive height for state buttons

New Here ,
May 17, 2019

Copy link to clipboard

Copied

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.

Views

90

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive height for state buttons

New Here ,
May 17, 2019

Copy link to clipboard

Copied

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.

Views

91

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 17, 2019 0
LEGEND ,
May 17, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 17, 2019 0