【CSS】画像にフィルタ特性といくつかのホバーアニメーションShow Tell Filter Hover

Show Tell Filter Hoverは画像にフィルタ特性とhover.cssを使ったいくつかのホバーアニメーション。

HTML

<img src="edinburghCastle.jpg" id="pic1" class="grow"></img>
<img src="edinburghCastle.jpg" id="pic2" class="sink"></img>
<img src="edinburghCastle.jpg" id="pic3" class="float"></img>
<img src="edinburghCastle.jpg" id="pic4" class= "shrink"></img>
<img src="edinburghCastle.jpg" id="pic5" class="bounce-in"></img>
<img src="edinburghCastle.jpg" id="pic6" class="rotate"></img>
<img src="edinburghCastle.jpg" id="pic7" class="grow-rotate"></img>

CSS

#pic1 {
filter: blur(3px);
}
#pic2 {
filter: contrast(150%);
}
#pic3 {
filter: brightness(2);
}
#pic4 {
filter: saturate(75%);;
}
#pic5 {
filter: hue-rotate(150deg);;
}
#pic6 {
filter: invert(100%);
}
#pic7 {
filter: grayscale(75%);
}
.grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.sink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.sink:hover, .hvr-sink:focus, .hvr-sink:active {
-webkit-transform: translateY(8px);
transform: translateY(8px);
}
.float {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.float:hover, .hvr-float:focus, .hvr-float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
.shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
.grow-rotate {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
-webkit-transform: scale(1.1) rotate(4deg);
transform: scale(1.1) rotate(4deg);
}
.bounce-in {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.bounce-in:hover, .bounce-in:focus, .bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
.rotate {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.rotate:hover, .rotate:focus, .rotate:active {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
 
Show Tell Filter Hover

【CSS】画像にフィルタ特性といくつかのホバーアニメーションShow Tell Filter Hover

  • LATEST
  • RELATED
  • POPULAR