Hover Shine Effect
DEMO 4 - Hover Shine Effect With CSS
<style type='text/css'>
.demo4 {height: 300px;width: 350px;margin: 0 auto;position: relative}
.demo4:after, .demo4:before {
left: 5%;
-moz-transition-property: "left, opacity";
-o-transition-property: "left, opacity";
-webkit-transition-property: "left, opacity";
transition-property: "left, opacity";
-moz-transition-duration: ".6s, .6s";
-o-transition-duration: ".6s, .6s";
-webkit-transition-duration: ".6s, .6s";
transition-duration: ".6s, .6s"}
.demo4:after {
opacity: 0;height: 7px;width: 60px;
margin-left: -30px;top: -3px;content: "";position: absolute;
background: -moz-radial-gradient(50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 75%);
background: -webkit-radial-gradient(50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 75%);
background: radial-gradient(50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 75%)}
.demo4:before {
opacity: 0;content: "";position: absolute;
top: -11px;height: 25px;width: 25px;margin-left: -12px;
background: -moz-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 75%);
background: -webkit-radial-gradient(50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 75%);
background: radial-gradient(50% 50%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 75%);
z-index: 40;background-repeat: no-repeat}
.demo4:hover:after, .demo4:hover:before {left: 70%;opacity: 1;}
.demo4:hover .info:after {
-moz-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 1;
right: -170%;
display: block}
.demo4:hover .info:before {
opacity: 1;
background:-moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
background:linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
-moz-background-size: 100% 1px, 100% 100%;
-o-background-size: 100% 1px, 100% 100%;
-webkit-background-size: 100% 1px, 100% 100%;
background-size: 100% 1px, 100% 100%;
background-repeat: no-repeat;
-moz-transition-property: "background, opacity";
-o-transition-property: "background, opacity";
-webkit-transition-property: "background, opacity";
transition-property: "background, opacity";
-moz-transition-duration: ".6s, .6s";
-o-transition-duration: ".6s, .6s";
-webkit-transition-duration: ".6s, .6s";
transition-duration: ".6s, .6s"}
.info {
background: -moz-linear-gradient(70deg, #888888, #aaaaaa);
background: -webkit-linear-gradient(70deg, #888888, #aaaaaa);
background: -ms-linear-gradient(70deg, #888888, #aaaaaa);
background: -o-linear-gradient(70deg, #888888, #aaaaaa);
background: linear-gradient(20deg, #888888, #aaaaaa);
border-radius: 5px;
position: relative;
overflow: hidden;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.4);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 30px;
font-family: sans-serif}
.info:before {
opacity: 0;content: "";position: absolute;
pointer-events: none;top: 0;left: 0;right: 0;bottom: 0;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);
-moz-background-size: 100% 1px, 100% 100%;
-o-background-size: 100% 1px, 100% 100%;
-webkit-background-size: 100% 1px, 100% 100%;
background-size: 100% 1px, 100% 100%;
background-repeat: no-repeat}
.info:after {
opacity: 0;position: absolute;pointer-events: none;
top: -200%;width: 400%;right: -105%;bottom: -100%;content: "";
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);
background-repeat: no-repeat;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
-webkit-background-size: 50% 100%;
background-size: 50% 100%;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s}
.info h1 {
letter-spacing: -1px;
font-size: 26px;
line-height: 26px;
margin-top: 0;
color: rgba(0, 0, 0, 0.7);
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2)}
.info p {
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
color: rgba(0, 0, 0, 0.7);
font-size: 14px;
margin-bottom: 20px}
.info .button:hover {background: #31a344;color:#fff}
.info .button {
display: inline-block;
letter-spacing: 1px;
font-weight: bold;
border-top: 1px solid rgba(255, 255, 255, 0.4);
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.3);
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
color: rgba(0, 0, 0, 0.7);
padding: 12px 20px;
text-transform: uppercase;
font-size: 10px;
margin: 0px auto}
</style>
<div class='demo4'>
<div class='info'>
<h1>SAHABAT BLOGGER 77</h1>
<p>..Tulis Sesuatu Disini..</p>
<a class='button' href='http://sahabatblogger77.blogspot.com'>SB-77 Design</a>
</div>
</div>