Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
298 lines (282 sloc) 10.3 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/font-awesome/4.7.0/css/font-awesome.css"/>
<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-blur {
overflow: hidden;
position: relative;
}
.effect-blur-thumb {
transition: all 0.3s ease;
width: 100%;
}
.effect-blur-over {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all 0.3s ease;
transform: scale(1.2);
color: white;
text-shadow: 0 0 3px #000;
}
.effect-blur:hover .effect-blur-thumb {
filter: blur(8px) brightness(1.5);
transform: scale(1.1);
}
.effect-blur:hover .effect-blur-over {
opacity: 1.0;
transform: scale(1.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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-0.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-1.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-2.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-3.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-4.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-5.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-6.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-7.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-8.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-9.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-10.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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">
<div class="effect-blur">
<a href="#">
<div class="effect-blur-thumb">
<img src="imgs/photo-11.jpg"/>
</div>
<div class="effect-blur-over">
<div>
<i class="fa fa-twitter"></i> 999
<i class="fa fa-facebook-square"></i> 999
<i class="fa fa-google-plus"></i> 999
</div>
</div>
</a>
</div>
<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>