First pen, so hi codepen!
I decided to showcase what can be done with image filters and pseudo class selectors.
A Pen by gomezisdan on CodePen.
First pen, so hi codepen!
I decided to showcase what can be done with image filters and pseudo class selectors.
A Pen by gomezisdan on CodePen.
<body> | |
<div class="title"> | |
<h1>CSS3 Image filters on hover</h1> | |
</div> | |
<div class="container"> | |
<img class="hill" id="no-filter" src="http://gomezisdan.com/hill.jpg"/> | |
<p>No Filter</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="grayscale" src="http://gomezisdan.com/hill.jpg" /> | |
<p>Grayscale</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="invert" src="http://gomezisdan.com/hill.jpg" /> | |
<p>Invert</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="brightness" src="http://gomezisdan.com/hill.jpg" /> | |
<p>Brightness</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="saturation" src="http://gomezisdan.com/hill.jpg"/> | |
<p>Saturation</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="sepia" src="http://gomezisdan.com/hill.jpg"/> | |
<p>Sepia</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="blur" src="http://gomezisdan.com/hill.jpg"/> | |
<p>Blur</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="opacity" src="http://gomezisdan.com/hill.jpg"/> | |
<p>Opacity</p> | |
</div> | |
<div class="container"> | |
<img class="hill" id="blur-hue" src="http://gomezisdan.com/hill.jpg"/> | |
<p>Blur + Saturation</p> | |
</div> | |
<div class="container last"> | |
<img class="hill" id="blur-text" src="http://gomezisdan.com/hill.jpg"/> | |
<div class="hidden">Hello</div> | |
<p>Blur + Text</p> | |
</div> | |
</body> |
//My first Pen! |
@import url(https://fonts.googleapis.com/css?family=Oswald); | |
html { | |
width: 100%; | |
background: #2F97C1; | |
background: -webkit-linear-gradient(left top, #2F97C1, #D62246); | |
background: -o-linear-gradient(bottom right, #2F97C1, #D62246); | |
background: -moz-linear-gradient(bottom right, #2F97C1, #D62246); | |
background: linear-gradient(to bottom right, #2F97C1, #D62246); | |
} | |
body { | |
width: 80%; | |
margin: auto; | |
text-align: center; | |
} | |
.container { | |
display: inline-block; | |
padding: 20px 10px; | |
} | |
.last { | |
padding: 0px 0px 0px 10px; | |
} | |
h1, p, .hidden { | |
font-family: 'Oswald', sans-serif; | |
text-align: center; | |
text-transform: uppercase; | |
color: #E7E2DC; | |
letter-spacing: 0.1em; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
h1 { | |
font-size: 4em; | |
border-top: 4px double #ffffff; | |
border-bottom: 4px double #ffffff; | |
} | |
#grayscale:hover { | |
-webkit-filter: grayscale(1); | |
filter: grayscale(1); | |
} | |
#invert:hover { | |
-webkit-filter: invert(.9); | |
filter: invert(.9); | |
} | |
#brightness:hover { | |
-webkit-filter: brightness(.5); | |
filter: brightness(.5); | |
} | |
#saturation:hover { | |
-webkit-filter: saturate(6); | |
filter: saturate(6); | |
} | |
#sepia:hover { | |
-webkit-filter: sepia(1); | |
filter: sepia(1); | |
} | |
#blur:hover { | |
-webkit-filter: blur(5px); | |
filter: blur(5px); | |
} | |
#opacity:hover { | |
-webkit-filter: opacity(.5); | |
filter: opacity(.5); | |
} | |
#blur-hue:hover { | |
-webkit-filter: blur(5px) saturate(6); | |
filter: blur(5px) saturate(6); | |
} | |
#blur-text:hover { | |
-webkit-filter: blur(5px); | |
filter: blur(5px); | |
} | |
.last { | |
position: relative; | |
} | |
.hidden { | |
visibility: hidden; | |
position: absolute; | |
top: 30px; | |
width: 300px; | |
padding-top: 50px; | |
font-size: 2em; | |
z-index: 99px; | |
} | |
.container:hover > .hidden { | |
visibility: visible; | |
pointer-events: none; | |
} |