RSS

Category Archives: css

Fade In and Fade Out Effect Using css On main div

<style>
.main:hover .imgclass,.main:hover .left,.main:hover .right
{

opacity: 1.0;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;

}

.right
{
width:180px;
float:left;

opacity: 0.70;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
margin: 0px 0px 0px 10px;
/* right: 1000; */
text-align: right;}

.left
{
width:200px;
float:left;
opacity: 0.70;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
margin: 0 0 0 10px;}

.imgclass
{

opacity: 0.70;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}

/*img {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}*/

.main
{
width:430px;
}

</style>
<div class=”main”>

<a href=”#”><img class=”imgclass” src=”http://www.adworldsmedia.com/wp-content/themes/adworldmedia/img/p1.png&#8221; />
<div style=”border:2px solid #C5BDBE;width:430px;float:left;”>
<div class=”left”><h2>Test Here</h2></div> <div class=”right”><h2>right text Here</h2></div>
</div>
</a>

</div>

Advertisements
 
Leave a comment

Posted by on October 29, 2014 in css