CODEWITHSUNDEEP
htmlcss
RagingBull
RagingBull

Reputation: 57

Fade in effect on hover using css?

I have read answers to similar questions to mine but cant quite get my head around how it works. i want a way where a box fades in slowly where an area is hovered over and disappears the same way, not abruptly.

in my code when the user hovers over a particular area a box should appear with instructions (and disappear when the area is not hovered over)

here is the html:

<div class="third">
        <label> Enter Password: </label>
        <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
        <p id="tooltipbox" style="position:absolute;visibility:hidden">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
    </div>

here is the css:

#tooltipbox{
    font-size: 14px;
    border: 2px solid blue;
    width: 200px;
    height: 100px;
    background-color: red;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;

  transition:color .2s ease-out, background 1s ease-in;
}

at the moment it is close to being perfect but it does not fade in and out slowly which is what i want. it just abruptly appears/disappears when the mouse is over or not. how can i get the desired fade effect?

p.s. i only want to do this in css not js thanks

code for vincent:

   <div class="third">
            <label> Enter Password: </label>
            <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
            <div id="test">
            <p>Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
            </div>
        </div>

#test p{
    font-size: 14px;
    border: 2px solid blue;
    width: 200px;
    height: 100px;
    background-color: red;

}

#test p:hover {
    color:black;
    animation: fadein 2s;
    -webkit-animation: fadein 2s; /* Safari and Chrome */
}

@-webkit-keyframes fadein { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

Upvotes: 1

Views: 6364

Answers (2)

tachyonflux
tachyonflux

Reputation: 20211

I think you are looking to animate the opacity, not the background.

Initialize the opacity to 0, setup animations:

opacity: 0;

-o-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

Set opacity to 1 for a hover:

.third:hover #tooltipbox{
    opacity: 1;
}

http://jsfiddle.net/eypm4v5u/

Upvotes: 3

Blake Frederick
Blake Frederick

Reputation: 1670

This may be the effect you're looking for: http://jsfiddle.net/9jqrz813/1/

HTML:

<div class="third">
        <label> Enter Password: </label>
        <input type="text" name="pword1" class="iBox" id="pword1" onmouseout="HideToolTip()" onmouseover="ShowToolTip()" onkeyup="allFunctions()" placeholder="choose a password" autocomplete="off">
        <p id="tooltipbox">Password must be between 8-16 characters, contain an uppercase, lowercase, number and special character</p>
    </div>

CSS:

#tooltipbox {
   padding: 10px;

    color: red;
  /* HOVER OFF */
   -webkit-transition: color 2s;
   -moz-transition: color 2s;
   -o-transition: color 2s;
   transition: color 2s;
}

#tooltipbox:hover {
   padding: 10px;

    color: white;
  /* HOVER ON */
   -webkit-transition: color 2s;
   -moz-transition: color 2s;
   -o-transition: color 2s;
   transition: color 2s;
}

Upvotes: 1

Related Questions