<h1>A demo on highlight effects on hover </h1>
<p>
<small>A quick demo by @makzan. Made for ModernWeb.Design tutorial.</small></p>
<a href="#" class="box link1">Hello World</a>
<a href="#" class="box link2">Hello CSS</a>
<a href="#" class="box link3">Try hover me</a>
a.box {
padding: 3em;
display: inline-block;
color: white;
font-weight: bolder;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.9);
background: gray;
background-position: center center;
background-size: cover;
position: relative;
overflow: hidden;
letter-spacing: -0.02em;
text-rendering: optimizeLegibility;
margin: .3em;
border-radius: 3px;
transition: all 0.3s ease-out;
/* shadow */
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// border: 1px solid red;
}
/* highlight */
&:after {
content: '';
position: absolute;
top: -60%;
left: 0%;
width: 60%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%);
transform: translate3d(-50%, 0, 0) rotateZ(45deg);
opacity: 0;
transition: all 0.3s ease-out;
}
&:hover {
// transform: scale3d(1.09,1.09,1);
transition-duration: 0.3s;
box-shadow: 0 1px 1px rgba(0,0,0,.5);
z-index: 99;
&:after {
opacity: 1;
transform: translate3d(0, 0, 0) rotateZ(45deg);
}
}
&.link1 {
background-image: url(http://unsplash.it/500x500?image=234);
}
&.link2 {
background-image: url(http://unsplash.it/500x500?image=857);
}
&.link3 {
background-image: url(http://unsplash.it/500x500?image=845);
}
}
/* Not related */
body {
padding: 5em 2em;
font-size: 16px;
background: #efefef;
}
h1 {
font-size: 1em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.