La propiedad «filter» de CSS3 permite aplicar efectos de filtro comunes a un elemento, como la falta de definición, escala de grises, el brillo, el contraste . En esta articulo se demuestra el uso de uno de los efectos más conocidos, el blur en una imagen. Cuando el ratón pasa por encima de la imagen:
EJEMPLO:
CSS
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700' rel='stylesheet' type='text/css'> <style> figure.blurfilter{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; /* hide overflowing elements by default */ } figure.blurfilter img{ display: block; width: 250px; /* width of image */ height: auto; transition: all 0.4s 0.4s; } figure.blurfilter figcaption{ position: absolute; display: block; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; background: white; padding: 10px; z-index: 100; width: 90%; height: 90%; overflow: hidden; top: 5%; left: 5%; font-family: 'Josefin Sans', sans-serif; /* google font */ font-size: 16px; opacity: 0; -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all .4s; } figure.blurfilter figcaption h3{ border-bottom: 1px solid red; text-align: left; width: 90%; margin: 0; } figure.blurfilter figcaption p{ text-align: left; margin-top: 10px; line-height: 1.5; } figure.blurfilter figcaption a{ text-decoration: none; } /* Default effect */ figure.blurfilter:hover img{ -webkit-filter: blur(30px); /* blur filter */ filter: blur(30px); /* blur filter */ -webkit-transform: scale(1.3); transform: scale(1.3); -moz-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s; } figure.blurfilter:hover figcaption{ opacity: 1; box-shadow: 0 0 5px gray; -moz-transition: all .4s .4s; -webkit-transition: all .4s .4s; transition: all .4s .4s; } /* Semi transparent figcation background effect */ figure.semitransparent figcaption{ background: transparent; } figure.semitransparent figcaption:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background: white; opacity: .5; /* render background semi transparent */ } /* Rotate figcation effect */ figure.blurrotate figcaption{ -webkit-transform: rotate(10deg); transform: rotate(10deg); } figure.blurrotate:hover figcaption{ -webkit-transform: rotate(0); transform: rotate(0); } /* Slideup figcation effect */ figure.slideup figcaption{ -webkit-transform: translateY(100%); transform: translateY(100%); } figure.slideup:hover figcaption{ -webkit-transform: translateY(0); transform: translateY(0); } /* RotateX figcation effect */ figure.rotatex figcaption{ -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } figure.rotatex:hover figcaption{ -webkit-transform: rotateX(0); transform: rotateX(0); } /* RotateY figcation effect */ figure.rotatey figcaption{ -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } figure.rotatey:hover figcaption{ -webkit-transform: rotateY(0); transform: rotateY(0); } </style> HTML
<figure class="blurfilter default"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure> <figure class="blurfilter semitransparent"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure> <figure class="blurfilter blurrotate"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure> <figure class="blurfilter slideup"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure> <figure class="blurfilter rotatex"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure> <figure class="blurfilter rotatey"> <img src="/IMAGEN" alt="An awesome picture"> <figcaption> <h3>Bcn Dos Web</h3> <p>Soluciones para Tu Web. Blur Image Hover</p> </figcaption> </figure>