Last active
December 26, 2015 16:58
-
-
Save GrzegorzPerko/7183390 to your computer and use it in GitHub Desktop.
AHOVER - CSS3 Gradient/Image Transition Effect.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** DON'T FORGET ABOUT <element class="ahover"><span>Text</span></a> IF U USE TEXT ELEMENT *// | |
| .ahover { | |
| display: block; | |
| /** text-indent: -999em; ** if u use only only img **/ | |
| position: relative; | |
| } | |
| .ahover:after { | |
| content: ""; | |
| height: 100%; | |
| left: 0; | |
| opacity: 0; | |
| position: absolute; | |
| top: 0; | |
| transition: all 0.5s ease 0s; | |
| width: 100%; | |
| z-index: 1; | |
| } | |
| .ahover:hover:after { | |
| opacity: 1; | |
| } | |
| .ahover span { | |
| display: block; | |
| position: relative; | |
| z-index: 2; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <h1>This is Gradient/Image Trasition Effect CSS3.</h1> | |
| <p>This is my effect. I use it to all transtion effect on background-image or background gradients in work. Works in IE7 if u using <a href="http://css3pie.com/"></a>css3pie</a> </p> | |
| <p>We need only make tag <element class="ahover"><span></span></element></p> | |
| <p>This is effect:</p> | |
| <a class="ahover" href="mailto: [email protected]"><span>This is effect</span></a> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1 { | |
| text-align: center; | |
| } | |
| .ahover { | |
| float: left; | |
| margin: 0 auto; | |
| font-weight: bold; | |
| color: #FFF; | |
| width: 300px; | |
| text-align: center; | |
| line-height: 38px; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-size: 14px; | |
| text-transform: ; | |
| display: block; | |
| position: relative; | |
| background: #1e5799; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */ | |
| } | |
| .ahover:after { | |
| content: ""; | |
| height: 100%; | |
| left: 0; | |
| opacity: 0; | |
| position: absolute; | |
| top: 0; | |
| transition: all 0.5s ease 0s; | |
| width: 100%; | |
| z-index: 1;background: #112a56; /* Old browsers */ | |
| background: -moz-linear-gradient(top, #112a56 0%, #5a7da8 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#112a56), color-stop(100%,#5a7da8)); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, #112a56 0%,#5a7da8 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, #112a56 0%,#5a7da8 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, #112a56 0%,#5a7da8 100%); /* IE10+ */ | |
| background: linear-gradient(to bottom, #112a56 0%,#5a7da8 100%); /* W3C */ | |
| } | |
| .ahover:hover:after { | |
| opacity: 1; | |
| } | |
| .ahover span { | |
| display: block; | |
| position: relative; | |
| z-index: 2; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment