Below is a code pen I put together. The basics of it is when the user hovers over each image it flips over with content on the back.
✔✔I have a few questions on the functionality of it
in my CSS I want to style the ‘image’ class I have in the html. However, when I try to style ‘.image’ nothing gets affected. It only works when I style ‘img’ tag, which is in the html. Why won’t my styling work in the CSS when I reference .image?
When the card flips over after hovering over it, the gap between the image narrows. So if your on the first image(first on left) and it flips over, the gap between the first and second image is narrower than the gap between the 2nd and 3rd images. Why is that? How can I keep the gap the same after hovering?
As to 1 – it does affect the class (assuming your talking about border-radius), it’s the fact that the image does not have rounded borders and sticks out of the div element. You could add overflow: hidden to the class.
Haven’t figured out part 2 yet.
Edit – that seems to come down to the fact that the rear is wider than the front because of the padding…
Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘CSS’ is closed to new topics and replies.