0

Have problems with hover shape on responsive

I have this code:

.thumb {
  max-height: 21.875em; /* 350px */ 
  max-width: 21.875em; /* 350px */ 
  width: 100% !important; 
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
.mask-thumb {
  height: 21.875em; /* 350px */
}

When don't change browser size, then hover image is same size as image. Tried to put different border percents in css media screens but still hover not exactly like background image

Jeroen Heier
  • 3,520
  • 15
  • 31
  • 32
Māris L
  • 37
  • 10
  • `1em` = current font size. The problem with that is that every browser has different default font sizes for different html elements. I would move away from `em` in this particulate case. If you must use `em` then consider resetting browser defaults. – I haz kode Aug 26 '17 at 16:53
  • Changed to px, but I think there is problem with responsive things. When changing size of browser image turn smaller, but hover have wrong size and that's why hover is different from background image – Māris L Sep 28 '17 at 17:26

0 Answers0