Forums

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

Home Forums CSS Need help with responsive images.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #208694
    thepreciselife
    Participant

    I have 3 div images that flip 180 degrees when hovered.

    As seen here: http://codepen.io/anon/pen/YypXjw

    The images are all responsive to the width but not height and as soon as I had height: auto;' they start to disappear.

    I just want to make them responsive to width and height adjustments.

    Any help is greatly appreciated.

    #208750
    tmarkwell16
    Participant

    have you tried putting them in a div and telling them to be 100% of that div, then you can do whatever you want to the div and the image will do the same.

    #208851
    thepreciselife
    Participant

    There is one main div that is the width of the page, then each of the images is in its own div so shouldnt that be what you are describing?

    #208890
    thepreciselife
    Participant

    This works but it seems like in combination with the flip on hover it does not want to appear correctly.

    If you look at it now they are now shrunken from top to bottom.https://www.3peaks.us

    #208963
    thepreciselife
    Participant

    First off, thank you so much for your help Beverleyh. You have no idea how much I appreciate this.

    So I had tried to modify my code to look more like yours and it would display but the image itself would shrink vertically and become 33% its own size, and when I would remove any of the 33% padding-bottom then it would just make the image disappear.

    Now youre new codepen post is perfect. The only problem I am having now is displaying a separate back image. Because on hover, its suppose to flip to another image with different text like in my original code pen post.

    #208973
    thepreciselife
    Participant

    The part I dont understand is how to get the hover action to recognize a whole different div as the back div.

    Ill continue to try messing with it.

    Thank you so much for your help though, I really appreciated it.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.