Reputation: 915
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
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
Reputation: 115383
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
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