Skip to content

Instantly share code, notes, and snippets.

@rollsappletree
Created October 27, 2012 21:59
Show Gist options
  • Save rollsappletree/3966530 to your computer and use it in GitHub Desktop.
Save rollsappletree/3966530 to your computer and use it in GitHub Desktop.
prova
/**
* prova
*/
.model {
opacity: 1;
filter: url(#blur-5px);
-webkit-filter: blur(5px);
}
.modell {
opacity: 1;
}
.model.animate-in:hover {
filter:none;
-webkit-filter: blur(0px);
opacity: 1;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0,1,1,0);
-moz-transition-timing-function: cubic-bezier(0,1,1,0);
-o-transition-timing-function: cubic-bezier(0,1,1,0);
-ms-transition-timing-function: cubic-bezier(0,1,1,0);
transition-timing-function: cubic-bezier(0,1,1,0);
}
.modell.animate-out:hover {
filter: url(#blur-5px);
-webkit-filter: blur(5px);
opacity: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: cubic-bezier(0,1,1,0);
-moz-transition-timing-function: cubic-bezier(0,1,1,0);
-o-transition-timing-function: cubic-bezier(0,1,1,0);
-ms-transition-timing-function: cubic-bezier(0,1,1,0);
transition-timing-function: cubic-bezier(0,1,1,0);
}
<img class="modell animate-out" src="https://o.twimg.com/1/proxy.jpg?t=FQQVBBhMaHR0cDovL2Rpc3RpbGxlcnlpbWFnZTMuaW5zdGFncmFtLmNvbS8yZjAxYjM3YzFlMGMxMWUyYjA1ZTEyMzEzODFiNDQ1Y183LmpwZxQCFgASAA&s=gEwkFlJlXHBeGycpMHXqzm5bay0B0l-rO6N0eCrEro0"/>
<img class="model animate-in" src="https://o.twimg.com/1/proxy.jpg?t=FQQVBBhMaHR0cDovL2Rpc3RpbGxlcnlpbWFnZTMuaW5zdGFncmFtLmNvbS8yZjAxYjM3YzFlMGMxMWUyYjA1ZTEyMzEzODFiNDQ1Y183LmpwZxQCFgASAA&s=gEwkFlJlXHBeGycpMHXqzm5bay0B0l-rO6N0eCrEro0"/>
<svg id="svg-image-blur">
<filter id="blur-5px">
<feGaussianBlur stdDeviation="5" />
</filter>
<filter id="blur-0px">
<feGaussianBlur stdDeviation="0" />
</filter>
</svg>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment