- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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/PoowXaX
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::after
instead 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.
Jeroen Gratitude for help! Thank you! sometimes it doesn’t work on iOS Safari …
Preview here: https://codepen.io/mary_pieroszkiewicz/pen/OJJVNvP
Hm, I see nothing wrong there on iOS Safari…