Home
Register
Log incss on hover slow fadeout template example!
Page 1 of 1
css on hover slow fadeout template example!
by jamied_uk 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
jamied_uk- Admin
- Posts : 2951
Join date : 2010-05-09
Age : 41
Location : UK -
Re: css on hover slow fadeout template example!
by jamied_uk 9th November 2014, 18:56
This version has a border glow effect 
Download Link // download link https://app.box.com/s/3xcnuu6m58yevvc5nrbp
- 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
jamied_uk- Admin
- Posts : 2951
Join date : 2010-05-09
Age : 41
Location : UK -
jamied_uk- Admin
- Posts : 2951
Join date : 2010-05-09
Age : 41
Location : UK -
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|