이미지에 다양한 효과를 주는 기능
<!DOCTYPE html>
<html>
<head>
<style>
img{
transition: all 1s;
}
img:hover{
-webkit-filter:grayscale(100%) blur(3px);
-0-filter:grayscale(50%) blur(3px);
filter:grayscale(0%) blur(3px);
}
h1{
-webkit-filter:blur(1px);
-0-filter:blur(3px);
filter:blur(3px);
}
</style>
</head>
<body>
<h1>Mountain</h1>
<img src="sampl.mt.jpg" alt="">
</body>
</html>
부드럽게 장면전환을 하는 transition
올리면 변하는 것이 hover
댓글