CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushi
Sushi

Reputation: 676

How to add delay in css hover on a div that was displayed none?

My first div is a simple blue square, my second div is a simple red square with display:none;. when hover the first one (the blue one) the second appears with text and image etc.. but what i want is a simple effect of delay or sliding (if possible, but if not a simple delay would be cool) i'm working on it from 2hours without any success, please any help ?

This is the jsffidle example here

this is my code : 

<div class="first">
<div class="second">
    <h1 class="hover-title">Hello ! </h1>
</div>

CSS :

.first{
transition-delay:2s;
width:100px;
height:100px;
background-color:blue;
}

 h1{
 color:gold;
 }

  .second{ 
  display:none;
  background-color:red;
  }

.first:hover .second{
 display:inline-block;
 width:100%;
 height:100%;
}

Thank you all.

Upvotes: 0

Views: 1529

Answers (3)

Anwar
Anwar

Reputation: 4246

CSS only solution

I didn't start with your example because you were missing some notions that are important to have in mind when trying to create a sliding div upon an initial one. Let me explain :

JSFiddle

HTML

<div class="content-container">
    <div class="content-teaser">
        Catchy teaser here
    </div>
    <div class="content-description">
        Description that might be longer than the catchy teaser sentence <button>see more</button>
    </div>
</div>

CSS

.content-container {
    width : 100px;
    height : 140px;
    position : relative;
    overflow : hidden;
}

.content-teaser {
    width : 100px;
    height : 140px;
    background : blue;
    position : absolute;
    color : white;
}

.content-description {
    width : 100px;
    height : 140px;
    background : red;
    position : absolute;
    margin-top : 140px;
    transition : .25s;
}

.content-description:hover {
    margin-top : 0px;
}

.content-teaser:hover + .content-description {
    margin-top : 0px;
}

Explaination You see 3 <div></div> :

  1. The parent, this is the one which will help us hide the "hidden" div that is in fact marged, but you don't see it because of the property overflow : hidden
  2. The "teaser" div that is the one which is displayed by default
  3. The "hidden" div that is marged and so hidden because of the property right above

So the trick is to use this famous overflow : hidden. You first set all your divs, parent and children, the same width and height. Then, you want to use a special position property to put the "hidden" div on top of the "teaser" div using position : absolute for each one. So the parent will naturally have the position : relative to tell your children div to be position relatively to this div, because by default <body> is in position : relative.

Then, you applyied overflow : hidden to the parent, so when marging the future "hidden" div you will not see it.

Finally, you can use some CSS to alter an element according to the event of an other using + selector. So the following CSS :

.content-teaser:hover + .content-description {
    margin-top : 0px;
}

Means :

Put a margin on the div that have the class .content-description when the div with the class .content-teaser is :hovered.

Upvotes: 1

Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 930

This CSS code may help you to find the solution.

.second{ 
   display:inline-block;
   height: 100%;
   width: 100%;
   background-color:red;
   opacity: 0;
   transition: opacity  0.5s ease;    
 }

jsfiddle

Upvotes: 1

Collins Abitekaniza
Collins Abitekaniza

Reputation: 4578

You can use css transitions like

#my_div:hover{
     /*Your styles placed here*/
     -moz-transition:all 1s linear;
     -webkit-transition:all 1s linear;
     -o-transition:all 1s linear;
     transition:all 1s linear;
}

In my case 1s is the delay time, you can change that to any value you like

Upvotes: 0

Related Questions