Skip to content

Instantly share code, notes, and snippets.

@konishi
Created July 15, 2017 03:54
Show Gist options
  • Save konishi/3cdceba81be3cb96d3af0c8508df82c3 to your computer and use it in GitHub Desktop.
Save konishi/3cdceba81be3cb96d3af0c8508df82c3 to your computer and use it in GitHub Desktop.
<div class="sandbox-HoverCard">
<div class="sandbox-HoverCard_Item">東京都</div>
<div class="sandbox-HoverCard_Item">神奈川県</div>
<div class="sandbox-HoverCard_Item">千葉県</div>
</div>
.sandbox-HoverCard {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 30px;
&_Item {
align-items: center;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, .07), 0 6px 18px 0 rgba(0, 0, 0, .05);
box-sizing: border-box;
display: flex;
height: 200px;
justify-content: center;
margin: 10px;
padding: 40px 10px;
transition: .35s cubic-bezier(.4, 0, .2, 1);
width: calc(100% / 3);
&:hover,
&:focus {
box-shadow: 0 0 110px 0 rgba(0, 0, 0, .07), 0 30px 25px 0 rgba(0, 0, 0, .05);
text-decoration: none;
transform: translateY(-5px);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment