Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Margin, can't style a class issue

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #282503
    keithaul
    Participant

    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

    1. 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?
    2. 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?

    https://codepen.io/keithaul/pen/MLrOVV

    #282509
    Shikkediel
    Participant

    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.