Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hover and Scale Blocks UI Concept - CSS Only!
<body><div class="background"><div class="content">
<div class="block x1">Hover Over Me!</div>
<div class="block x2">Or Over Me!</div>
<div class="block x3">Try Hovering Here</div>
<div class="block x4">Last But Not Least</div>
<div class="block x5">Now Here!</div>
</div>
</div>
</body>
.background:before{
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-size: 100% 100%;
background-image: url('https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/53.jpg');
width: 150%;
height: 150%;
top:-20px;
left:-20px;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
background-repeat:no-repeat;
}
.content{
height: 400px;
width: 700px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
color: white;
-webkit-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
}
body{
font-family: 'Roboto Condensed', sans-serif;
text-align:center;
vertical-align:middle;
}
.x1{
width:200px;
height:150px;
background-color:#9CB1FF;
left: 0;
top: 0;
position: relative;
line-height:150px;
}
.x2{
position:absolute;
height:250px;
width:300px;
left:400px;
top:0px;
background-color:#FFFFFF;
line-height:250px;
color:black;
}
.x3{
position:absolute;
height:250px;
width:200px;
left:0px;
top:150px;
background-color:#6694FC;
line-height:250px;
}
.x4{
position:absolute;
height:150px;
width:500px;
left:200px;
top:250px;
background-color:#706AF3;
line-height:150px;
}
.x5{
position:absolute;
height:250px;
width:200px;
left:200px;
top:0px;
background-color:#8593E6;
line-height:250px;
}
.block{
-webkit-animation:scaledown 1s linear;
-moz-animation:scaledown 1s linear;
animation:scaledown 1s linear;
transform-origin:50% 50%;
animation-fill-mode: forwards;
}
.block:hover{
z-index:100;
-webkit-animation:scale 1s linear;
-moz-animation:scale 1s linear;
animation:scale 1s linear;
transform-origin:50% 50%;
animation-fill-mode: forwards;
}
@keyframes scale{
0%{
transform:scale(1.0);
}
100%{
transform:scale(1.1);
-webkit-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
box-shadow: 10px 10px 60px 10px rgba(0,0,0,0.1);
}
}
@keyframes scaledown{
0%{
transform:scale(1.1);
}
100%{
transform:scale(1.0);
}
}
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.