Responsive Image Overlay on Hover

Need help Responsiveness
1

Hello Guys

I basically want, when a user hovers an image in a repeating group to show image overlay.

myprofile
myprofile305×616 134 KB

The problem, that I cant solve is, how to make image overlay with 2 icons inside responsive.
312312312

I tried using Image, Group and Shape element as Overlay but I couldnt make it responsive, because I cant put the Icons inside the Shape or Image element.
123456789123456789

I hope, that I explained the problem well enough so you understood it.

Thanks!

2

Can anyone help with this?

3

Quick brainstorm, the elements tree would look like this:

  • repeating group of images
    • RG item group
      • image
      • overlay group
        • icon magnifier
        • icon elipsis

The overlay group would be invisible by default, background flat color, black 20% or so. If RG Item group is hovered, then visible.

4

Thanks for your reply. Yes, the elements tree looks like that when I use group element as hover. But because the group cant keep proportions as the page resizes it gets messy like on the picture above.

5

Maybe a group as a parent of the image is what’s missing.

  • repeating group of images
    • RG item group
      • group image
        • image
        • overlay group
          • icon magnifier
          • icon elipsis

If you need some help, I’m beta’ing a refactoring as a service at refactoringnocode.com. Sign up, the first refactor is free.