-
http://thecodeplayer.com/walkthrough/simple-hover-effects-with-css3-filters
HTML
<div id="gallery"><a href="#"> <!-- Title and classes --> <span class="title">Saturate</span> <img class="saturate" src="http://file.mobilmusic.ru/ed/8b/77/1018670.gif" alt="" /> </a></div>
CSS
<style type="text/css"><!--
/*Styles*/
* { margin: 0; padding: 0;}
body {
font-family: arial, verdana, tahoma;
background: url('http:// .png');
}
#gallery {
width: 725px;
margin: 25px auto;
}
#gallery a {
display: block;
float: left;
margin-bottom: 25px;
position: relative;
-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);border-radius: 5%/10%;
border: 1px dotted #000;
}
/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
margin: 0 25px 25px 25px;
}
#gallery a img {
display: block;
-webkit-transition: all 0.5s;
border-radius: 5%/10%;
}
/*Hover effects*/
#gallery a img:hover {
-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
}
/*Title styles*/
.title {
color: #fff;
font-size: 13px;
font-weight: bold;
position: absolute;
left: 0;
bottom: 15px;
z-index: 1;
padding: 5px 7px;
background:#;
}
/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
--></style>
-
Commentaires
Aucun commentaire pour le moment
Ajouter un commentaire