Buttons won't do :hover effect on CSS Flexbox

HTML-CSS
1

CodepenCodepen

I have some items which I want aligned like this

06%20PM
06%20PM2112×1500 379 KB

However, whenever I hover over the top 2 buttons the color doesn’t change when i use the :hover effect. But the bottom two are able to work. Basically the top two buttons don’t function, even when I use Javascript. Whenever I align the columns vertically the add-cart-buttons will work. But when I have them setup like how I want it in the picture it doesn’t work.

2

Hi @fkhan698, if you are referring to the ‘add to cart’ buttons, I just checked your code on codepen and they all work. All buttons in the page are actually changing their colors to green when I hover, Try refreshing your browser and please indicate the result. Hope this helps

3

Buttons are working fine for me.
Images are broken though, and the text is clipping though the boxes.

4

Okay so I got it to work on Chrome (was using Firefox intially) and on Chrome the image tags weren’t working and that’s why they were hovering. On Firefox my img tags weren’t broken at first, but whenever I removed the img tags they are working again. So I’m guessing this has something to do with my img tag on my HTML
UPDATE: I got it to work! I just placed my img tag in another div instead of leaving it in the my product-body div