Any tips on doing this to make it better ux
hovering the labels on the expanding the picture on the right
6 Replies
Hovering is not a good event to depend on if you're deploying to mobile
Hi! I would try to make the text more accessible. Be careful with contrast as you are working with white text and your background images make it more difficult for users to read. I would probably try adding some sort of layer between your text and image to fix this.
A common practice is to add a semi-transparent layer between the image and the text to tone the image in such a way that the contrast between the image and the text increases
When the image expands, keep its siblings at the top of the container. Having them be little slices still and drop-down to be vertically centered with the expanded image looks a little odd. Keep them aligned to the start of the container. And also have to echo adding an overlay to give your text more contrast.
possible, give the title a opaque background to look a little like a button, should improve contrast.
I see some inspiration from this https://www.youtube.com/watch?v=khjVPkO35F0 and change my total layout
thanks for the inputs guys, I did use of your advices to the layout.
Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way!
🔗 Links
✅ The original tweet: https://twi...