ARTICLE AD BOX
So I have two side-by-side square images that change to another pair of images on hover, using info from this question. The change-on-hover part works fine. But now it's giving me hell to resize them.
This 'background image in css' hover technique does not scale, and nothing seems to work for the change-on-hover feature other than a set pixel height and width. Percentage of parent element sizing does not work, aspect-ratio does not work. VW and VH kinda work but it looks terrible; the ratios are always off and I just want the images to stay square.
I would like these two square images to have the following qualities:
They stay square.
They stay touching each other and centered as a pair (within a page content div) <- got this part already with the flexbox.
They scale with the page/viewport. <- this is my biggest struggle.
They change on hover to other predetermined square images (i.e. from A1 and B1 to A2 and B2) <- this does happen but I need a way other than by setting the dimension in pixels.
Are these conditions possible using only HTML and CSS?
I've tried using a table and div boxes to no avail. So far flexbox has been the best for centering the images with no gap. Honestly I am ready to smash my head into the keyboard right about now.
#squareimgA { background-image: url('A1.jpeg'); background-size: contain; background-position: center center; width: 300px; height: 300px; } #squareimgA:hover { background-image: url('A2.jpeg'); }(Identical code as above for squareimgB)
and then this is the class for the div box theyre in:
.options { display: flex; align-items: center; justify-content: center; }Thanks in advance and let me know if there's more information I need to provide. I have searched on here in case someone else already asked this and I couldn't find anything.
