6

I am trying to do something very simple, a para has opacity set to 0, when hovered on parent div the para's opacity changes to 1, there is a change of text happening after the opacity changes, it's not exactly flickering, the text kinda self adjusts itself which is a bit odd.

Here's the fiddle: http://jsfiddle.net/krish7878/7t6GM/

HTML Code:

 <div class="para">
    <p> SOME SAMPLE TEXT </p>
 </div>

CSS Code:

    .para{
         width: 1000px;
         border: 1px solid #000;
    }
    .para p{
        font-family: Arial, sans-serif;
        font-size: 80px;
        opacity: 0;
    }
    .para:hover p{
        opacity: 1;

        transition:         all 400ms ease;
        -moz-transition:    all 400ms ease;
        -webkit-transition: all 400ms ease;
        -o-transition:      all 400ms ease;
        -ms-transition:     all 400ms ease;
    }
chandan
  • 1,574
  • 4
  • 23
  • 52

1 Answers1

8

The solution is to change the backface-visibility property value to hidden.

The default value is visible.

Updated Example

.para p {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: Arial, sans-serif;
    font-size: 80px;
    opacity: 0;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • when I remove `backface-visibility: hidden;` it works too. why we must use both lines 1 and 2? – Alaeddine May 07 '14 at 23:57
  • @Alaeddine The `-webkit` vendor prefixed version is still needed for support in Chrome/Safari - see relevant support [here](https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility#Browser_compatibility). The un-prefixed version is for forwards compatibility. – Josh Crozier May 08 '14 at 00:00