Why when I hover mouse on cards image moved ?!
I am trying to fix it and I find when I remove page direction and or remove overflow-y from #center it's fixed but I need them !!
even when I inspect elements in cards and mouse hovering could to see all elements are moved but shown correct !
I guess it's maybe page rendering problem in chrome browser
in fact what is problem and how can I to fix it technically ?
Asked
Active
Viewed 64 times
0
java acm
- 1,020
- 12
- 24
-
1Try using flexbox instead of floating. This can be achieved very easily with flexbox. – Rajendran Nadar Sep 23 '17 at 08:59
-
why negative point !? it's a problem and question with real demo ! – java acm Sep 23 '17 at 10:46
-
Actually I gave a upvote for such a good question along with demo. Don't know who gave downvote. – Rajendran Nadar Sep 23 '17 at 10:48
-
try backface-visibility: hidden on .div. It does solve your problem. This is a known issue. See @Thai Hoc Ha Nguyen answer – vnt Sep 23 '17 at 11:41
1 Answers
1
This issue appears to be a Chrome bug according to this topic: image moves on hover - chrome opacity issue and I think you should setting position:relative to inner img solves the problem
Thai Hoc Ha Nguyen
- 78
- 1
- 10
-
Thanks for hint and your solution , it's fixed by set posision:relative; to card div ".div" https://jsfiddle.net/a3stn5ct/2/ – java acm Sep 23 '17 at 13:10
-
@javaacm you're welcome. I don't know why some people auto downvote the question, I gave you an upvote with real code demo. Be always positive my friend – Thai Hoc Ha Nguyen Sep 23 '17 at 14:26