Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
117 lines (103 sloc) 5.27 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>CSS Filter Sample - ICS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link rel="stylesheet" href="css/base.css"/>
<style>
/* 通常時 */
.effect-mono {
filter: grayscale(100); /* モノクロにする */
transition: filter 0.2s;
}
/* ホバー時 */
.effect-mono:hover {
filter: grayscale(0); /* モノクロを解除する */
}
</style>
</head>
<body>
<div class="navbar navbar-inverse bg-inverse">
<div class="container">
<a href="#" class="navbar-brand">CSS Filter Sample</a>
</div>
</div>
<div class="album">
<div class="container">
<div class="items">
<div class="item">
<a href="#"><img src="imgs/photo-6.jpg" class="effect-mono"/></a>
<p class="card-title">Mt.fuji</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-7.jpg" class="effect-mono"/></a>
<p class="card-title">Shinagawa Futo, Tokyo</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-8.jpg" class="effect-mono"/></a>
<p class="card-title">Gate City Osaki</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-0.jpg" class="effect-mono"/></a>
<p class="card-title">Tennozu Isle, Tokyo</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-1.jpg" class="effect-mono"/></a>
<p class="card-title">Harumi Futo, Tokyo</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-2.jpg" class="effect-mono"/></a>
<p class="card-title">Tokyo Station</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-3.jpg" class="effect-mono"/></a>
<p class="card-title">Minato Mirai, Kanagawa</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-4.jpg" class="effect-mono"/></a>
<p class="card-title">Gotenyama, Tokyo</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-5.jpg" class="effect-mono"/></a>
<p class="card-title">Shinagawa, Tokyo</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-9.jpg" class="effect-mono"/></a>
<p class="card-title">Tokyo Tower</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-10.jpg" class="effect-mono"/></a>
<p class="card-title">Rainbow Bridge</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="item">
<a href="#"><img src="imgs/photo-11.jpg" class="effect-mono"/></a>
<p class="card-title">From World Trade Center Building</p>
<p class="card-text">This is a dummy text. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</div>
</div>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Photo from <a href="https://www.flickr.com/photos/clockmaker-jp/" target="_blank">@clockmaker</a>.</p>
</div>
</footer>
</body>
</html>