css on hover slow fadeout template example!

View previous topic View next topic Go down

css on hover slow fadeout template example!

Post by jamied_uk on 9th November 2014, 17:23

Code:
<div class="hoverme" style="width:180px;">content<div class="displayme">hover content for options etc and even links

<a  href="#">to click</a>

</div>

</div>

 
<style type="text/css">

.displayme {

opacity: 0;

height: auto;

width: 300px;

position: relative;

background-color: orange;

transition: background 5000ms ease-out;

-webkit-transition: background 5000ms ease-out;

transition: opacity 6000ms ease-out;

-webkit-transition: opacity 6000ms ease-out;

}

 
.hoverme {

height: 30px;

width: 300px;

position: relative;

background-color: green;

transition: background 5000ms ease-out;

-webkit-transition: background 5000ms ease-out;

transition: all 6000ms ease-out;

-webkit-transition: all 6000ms ease-out;

transition: opacity 6000ms ease-out;

-webkit-transition: opacity 6000ms ease-out;

}

 
.hoverme:hover .displayme {

opacity: 1;

position: absolute;

top: 30px;

width: 300px;

height: auto;

transition: opacity 3000ms ease-in;

-webkit-transition: opacity 3000ms ease-in;

transition: background 5000ms ease-in;

-webkit-transition: background 5000ms ease-in;

}

 

.displayme:hover .displayme {

display: block;

position: absolute;

top: 30px;

width: 20px;

height: 20px;

padding:10px;

margin:10px;

transition: opacity 3000ms ease-in;

-webkit-transition: opacity 3000ms ease-in;

}

</style>


Newest glow version download link

https://app.box.com/s/yw03m94luz9x62jzqtfm

This can be used as a template and for making site more fun to use! make dynamic using php!


Live Demo


Last edited by jamied_uk on 9th November 2014, 19:35; edited 1 time in total
avatar
jamied_uk
Admin

Posts : 2268
Join date : 2010-05-09
Age : 34
Location : UK

http://address-shortner.co.uk

Back to top Go down

Re: css on hover slow fadeout template example!

Post by jamied_uk on 9th November 2014, 18:56

This version has a border glow effect Very Happy



Code:
<?php
// https://92.12.6.194/EDIT/div_onhover/test.php
// https://app.box.com/s/yw03m94luz9x62jzqtfm
?>
<div class="hoverme" style="width:180px;">content<div class="displayme">hover content for options etc and even links

<a  href="#">to click</a>

</div>

</div>


<body style="background:#000000">

<style type="text/css">

.displayme {

opacity: 0;
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);

height: auto;

width: 300px;

position: relative;

background-color: orange;

transition: background 5000ms ease-out;

-webkit-transition: background 5000ms ease-out;

transition: opacity 6000ms ease-out;

-webkit-transition: opacity 6000ms ease-out;

}

 
.hoverme {

height: 30px;

width: 300px;

position: relative;

background-color: green;

transition: background 5000ms ease-out;

-webkit-transition: background 5000ms ease-out;

transition: all 6000ms ease-out;

-webkit-transition: all 6000ms ease-out;

transition: opacity 6000ms ease-out;

-webkit-transition: opacity 6000ms ease-out;

}

 
.hoverme:hover .displayme {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);

opacity: 1;

position: absolute;

top: 30px;

width: 300px;

height: auto;

transition: opacity 3000ms ease-in;

-webkit-transition: opacity 3000ms ease-in;

transition: background 5000ms ease-in;

-webkit-transition: background 5000ms ease-in;

}

 

.displayme:hover .displayme {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);

display: block;

position: absolute;

top: 30px;

width: 20px;

height: 20px;

padding:10px;

margin:10px;

transition: opacity 3000ms ease-in;

-webkit-transition: opacity 3000ms ease-in;

}

</style>


Download Link // download link https://app.box.com/s/3xcnuu6m58yevvc5nrbp
avatar
jamied_uk
Admin

Posts : 2268
Join date : 2010-05-09
Age : 34
Location : UK

http://address-shortner.co.uk

Back to top Go down

Re: css on hover slow fadeout template example!

Post by jamied_uk on 9th November 2014, 20:21

For a faster fadeout example

https://app.box.com/s/gbksnpzn4hrn8nc2g2pp
avatar
jamied_uk
Admin

Posts : 2268
Join date : 2010-05-09
Age : 34
Location : UK

http://address-shortner.co.uk

Back to top Go down

Re: css on hover slow fadeout template example!

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum