Forums

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

Home › Forums › CSS › Hover overlay and image scaling

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 4, 2019 at 9:39 am #285922
    IMPACTMag
    Participant

    Hi,

    I’m pretty novice at hard coding HTML and CSS and am building most of our site through templates and visual composer in WordPress. I’ve stumbled into a bit of an issue that I think can be fixed with some basic custom CSS, but I’m in over my head.

    http://www.forge32.com/digital-editions/

    Each row of magazines has 3 columns. The images are set to contain so the full magazine is shown and bits don’t get cut off. The problem is that when you hover, the overlay color goes outside of the image. This happens on both the sides and top, depending on your screen size. Is there something I can do to the image or column (both?) to avoid this?

    Thanks in advance!

    April 4, 2019 at 11:10 am #285925
    Paulie_D
    Member

    The image is the wrong size for the container I would suggest.

    Changing contain to cover seems to fix the overlay issue.

    April 4, 2019 at 11:46 am #285927
    IMPACTMag
    Participant

    Contain fixes the overlay issue.

    What would you suggest for getting the image to be 100% height/width within the column space?

    I’ve adjusted the September/October 2018 cover to COVER and duplicated a CONTAIN version of it to show the difference. When scaling up or down responsively it crops the cover instead of keeping it in proportion.

    April 6, 2019 at 10:11 am #286010
    Dagny
    Participant

    ^^ can you share some screenshots to better understand what you are looking to fix ?

    April 8, 2019 at 11:29 am #286063
    IMPACTMag
    Participant

    ^ Definitely.

    A. 1 row, 3 columns, each image set to ‘contain’. Overlay appears to attach to column size, not image and resizes based on responsive layout size.

    Samples:
    Regular desktop size – https://www.screencast.com/t/N8xJ8CxHtS
    Tablet size – https://www.screencast.com/t/KqAReTiqDUt0

    B. 1 row, 3 columns, first image set to ‘cover’. The publication gets cropped on both top and sides. This defeats the purpose of having a magazine cover as the image IMO.

    Samples:
    Regular desktop size – https://www.screencast.com/t/ocQAs5SYd
    Tablet size – https://www.screencast.com/t/GDmJMG6q

    Ideally I want to keep the proportions of the cover to not cut off content. The actual scale or size of the images doesn’t matter to me as long as they fit within the columns.

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