- This topic is empty.
October 8, 2019 at 8:20 am #297055Mary PieroszkiewiczParticipant
I have a problem capturing a certain effect that I need to perform.
Hover card overlay effect screen: http://www.marypieroszkiewicz.com/project_drop__by__drop/images/screen.jpg
I have 4 image cards. When hover on the photo the background of the color overlay adopts the transform: scale (0.9) effect, a container with text is shown.
My code here: https://codepen.io/mary_pieroszkiewicz/pen/PoowXaXOctober 8, 2019 at 3:00 pm #297076JeroenRParticipant
Not really sure what you mean, but maybe this? https://codepen.io/jeroenreijs/pen/wvvaGpK
I think it’s has mainly to do with your selector. I used this selector:
.projects-content:hover .projects-content__image::afterinstead of your
.projects-content__image:hover::after > *:hover.
Also because of the HTML markup I changed the absolute positioned div from width 100% and height 100% to 90% which matches the overlay then. And the position is (100% – 90%)/2 = 5% from bottom and left.October 8, 2019 at 11:16 pm #297077Mary PieroszkiewiczParticipant
Jeroen Gratitude for help! Thank you! sometimes it doesn’t work on iOS Safari …
Preview here: https://codepen.io/mary_pieroszkiewicz/pen/OJJVNvPOctober 14, 2019 at 2:14 am #297277JeroenRParticipant
Hm, I see nothing wrong there on iOS Safari…
- The forum ‘CSS’ is closed to new topics and replies.