Skip to content

Instantly share code, notes, and snippets.

@gdarko

gdarko/square-hover-boces.html

Last active August 19, 2017 09:12
Show Gist options
  • Save gdarko/42e43e33324ec75c915929b676926ca5 to your computer and use it in GitHub Desktop.
Save gdarko/42e43e33324ec75c915929b676926ca5 to your computer and use it in GitHub Desktop.
Download ZIP
Beautiful CSS Hover Boxes
Raw
square-hover-boces.html
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Playball" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Square Boxes START -->
<style type="text/css">
.square-box {
position: relative;
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
}
.square-box:before {
content: "";
display: block;
padding-top: 100%;
}
.square-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white !important;
background-color: rgba(0, 0, 0, 0.5);
text-decoration: none !important;
padding: 10px;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
font-size: 30px;
line-height: 35px;
font-family: Playball, serif;
}
.square-overlay {
background-color: rgba(0, 0, 0, 0.5);
display: block;
position: absolute;
width: 100%;
height: 100%;
}
.square-box:hover .square-content {
background: rgba(0, 0, 0, 0.2);
}
</style>
<!-- Square Boxes END -->
<!-- Non related START -->
<style type="text/css">
.wrapper {
margin-top: 100px;
}
</style>
<!-- Non related END -->
</head>
<body>
<div class="container wrapper">
<div class="row">
<div class="col-sm-3">
<!-- Hover box -->
<div class="square-box" style="background-image: url(http://lorempixel.com/400/400/city/)">
<a href="https://en.wikipedia.org/wiki/Skopje" class="square-content">
<div>
<span>Skopje</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<!-- Hover box -->
<div class="square-box" style="background-image: url(http://lorempixel.com/400/400/city/)">
<a href="https://en.wikipedia.org/wiki/Belgrade" class="square-content">
<div>
<span>Belgrade</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<!-- Hover box -->
<div class="square-box" style="background-image: url(http://lorempixel.com/400/400/city/)">
<a href="https://en.wikipedia.org/wiki/Zagreb" class="square-content">
<div>
<span>Zagreb</span>
</div>
</a>
</div>
</div>
<div class="col-sm-3">
<!-- Hover box -->
<div class="square-box" style="background-image: url(http://lorempixel.com/400/400/city/)">
<a href="https://en.wikipedia.org/wiki/Moscow" class="square-content">
<div>
<span>Moscow</span>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment