CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Bhumi
Bhumi

Reputation: 13

stop flickering of divs using CSS

I want to show two divs at the same position after time intervals while hover over mouse by using CSS only. 

.showme{ 
    opacity:0;
    transition-property:opacity;
    transition-delay:1s;
 }
 .showhim:hover .showme{
    opacity:1;
    transition-property:opacity;
    transition-delay:1s;
 }
 .showhim:hover .ok{
    opacity:0;  
    transition-property:opacity;
    transition-delay:1s;
 }
<html>
    <head>
     <title>HI</title>
    </head>
    <body>
        <div>
    	    <div class="showhim">
            HOVER ME
            <div class="showme">hai</div>
            <div class="ok">ok</div>
    	    </div>
       </div>
    </body>
 </html>

The problem is even hidden div occupes space in the DOM. But i want to place div overlapping & display one after other when hover.

Used Display property instead of Opacity but it does not go well with transition.

I dont want to use position:absolute to position 2nd div over the other.

Upvotes: 1

Views: 541

Answers (1)

Romain Vincent
Romain Vincent

Reputation: 3561

Your best bet is to use transform: translate(x, y)

But if you want to make the 2 divs overlap perfectly, you will have to make sure you know the distances in pixels.

However, if the 2 divs have the same height, you can then just do a transform: translateY(-100%) on the second div.

Keep in mind that if an element's position is neither "absolute" nor "fixed", it will reserve space in the screen

Upvotes: 1

Related Questions