CODEWITHSUNDEEP
htmlcsscss-transitions
ben_dchost
ben_dchost

Reputation: 915

CSS Smooth fade and out transition (including text)

I have a simple hover effect that changes the text and background. What I would like to know is if there is a possible way to slow down the fade effect... I'm sure you can using the transition css but I have little knowledge on how to use it.

(The code is not full code and does not work correctly (but should be enough))

Here is HTML:

<div id="ourproductsleft" class="grid_3 alpha">
       <h4>Mail</h4>
       <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>
       <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p>
       <br>
       <br>
       <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>         
       </div> <!--end of ourproductsleft class 3-->

Here is CSS

/*Backgrounds for each div*/
#ourproductsleft {
background: #F2F7FA;
/*background-image:url(../img/index/body/ourproducts/grey.png);
background-repeat:repeat;*/
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;   
}

/*Hover bacgrounds for each div*/
#ourproductsleft:hover {
background-  image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
}


/*Do not display original (mail, domain etc) text on hover view*/
#ourproductsleft:hover .replies { 
display: none;

}

/*Keep display inline for maintext (longtext) on hover */
#ourproductsleft:hover .comment { 
display: inline;
opacity: 1; 
}

I have also made a DEMO

Upvotes: 3

Views: 17324

Answers (3)

shyammakwana.me
shyammakwana.me

Reputation: 5752

use this transition property in any element on which you are using :hover effect.

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

for example : 

-webkit-transition:2s color;
-moz-transition:2s color;
transition:2s color;

Multiple properties can be differentiate by comma

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115383

JSfiddle Demo

Essentially, you must use opacity with a transitions rather than display:none as the latter is not 'transitionable'. There are other options depending on what effect you are after but this is the basics.

HTML

<div id="ourproductsleft" class="grid_3 alpha">
    <h4>Mail</h4>
    <img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>

    <p class="comment">Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.</p>

    <p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>        
</div> <!--end of ourproductsleft class 3-->

CSS

/*Backgrounds for each div*/
#ourproductsleft {
    background: #F2F7FA;
    border-radius: 0px;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}


#ourproductsleft .comment,
#ourproductsleft .replies { 
    opacity: 0; 
    transition: opacity 1s ease;
}

#ourproductsleft:hover .comment,
#ourproductsleft:hover .replies{ 
    opacity: 1; 
}

Upvotes: 2

vipin macc
vipin macc

Reputation: 1

Hiii, you can add

transition-property: width, border-radius, background-color;
transition-duration: 1s, 2s, 5s;
transition-timing-function:  ease, ease-out, linear;

in your css

Upvotes: 0

Related Questions