1

I created a div that is simply an image, but when hovered, the original div is masked by another div with some text and a plain colored background.

Here is what I mean in jsfiddle: 'Mask on Hover'

The code all seems to work, including some nice css transitions. The problem I'm having is that both the original div and the mask div have a border-radius BUT as I hover over them the border-radius disappears for a second and then suddenly returns. For some reason every now and then it will also glitch and just remain without a border-radius at all while I'm hovering.

Is there any way to keep this from happening at all? Maybe a way to keep the content inside that div no matter what? I've tried using overflow:none as well as actually putting a border but it continues to happen.

MrVeiga
  • 61
  • 2
  • 10

2 Answers2

3

You're animating the border-radius as well. That means when you hover or un-hover, then the border starts as a square and then goes to the radius as part of the animation.

Mr. Mayers
  • 366
  • 1
  • 6
  • Oh I see, good point! Is there a way to animate the div and not the border-radius? in other words, is there any way to keep the same functionality and not animate the border? – MrVeiga Dec 20 '13 at 17:05
  • Sorry it took a while - if you change the transition all property of view img to transition transform (and -webkit-transition -webkit-transform), it should avoid animating the border-radius. However, apparently there is a bug in webkit browsers that applies the border-radius after the transition, which means the square corners will show up regardless. http://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome – Mr. Mayers Dec 22 '13 at 03:17
1

You can do this with the parent div of the image:

position: relative;
z-index: 99;

Hope this will work fine.

Jitu Raiyan
  • 498
  • 6
  • 13