<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<img src="http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg" class="bg">
<div class="outer">
<div class="hovereffect">
<img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png" alt="">
<div class="overlay">
<h2>Social Hover</h2>
<div class="rotate">
<p class="group1">
<a href="https://twitter.com/HTERCUMANP">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.facebook.com/profile.php?id=100008152065270">
<i class="fa fa-facebook"></i>
</a>
</p>
<hr>
<hr>
<p class="group2">
<a href="https://www.instagram.com/harunpehlivantebimtebitagem/">
<i class="fa fa-instagram"></i>
</a>
<a href="https://dribbble.com/harunpehlivan">
<i class="fa fa-dribbble"></i>
</a>
</p>
</div>
</div>
</div>
</div>
body {
font-family: Source Sans Pro, sans-serif;
margin: 0;
overflow: hidden;
}
.bg {
position: absolute;
width: 100%;
filter: blur(35px) grayscale(10%);
-webkit-filter: blur(25px) grayscale(25%);
transform: scale(1.4);
}
a {
text-decoration: none;
}
.outer {
padding-top: 100px;
display: block;
margin: auto;
width: 292px;
height: 195px;
font-family: sans-serif;
letter-spacing: 3px;
}
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
box-shadow: 0px 0px 20px -5px #000;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.hovereffect:hover img {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.7" /><feFuncG type="linear" slope="0.7" /><feFuncB type="linear" slope="0.7" /></feComponentTransfer></filter></svg>#filter');
filter: brightness(0.7);
-webkit-filter: brightness(0.7);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
font-size: 17px;
padding: 10px;
width: 100%;
font-weight: 100;
}
.hovereffect:hover h2 {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
margin: 50px 0 0 0;
background-color: transparent;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect .rotate {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 100%;
height: 100%;
position: absolute;
}
.hovereffect hr {
width: 50%;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect hr:nth-child(2) {
-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale3d(0, 0, 1);
transform: translate3d(-50%, -50%, 0) rotate(0deg) scale3d(0, 0, 1);
}
.hovereffect hr:nth-child(3) {
-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg) scale3d(0, 0, 1);
transform: translate3d(-50%, -50%, 0) rotate(90deg) scale3d(0, 0, 1);
}
.hovereffect h2,
.hovereffect hr {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
}
.group1,
.group2 {
left: 50%;
position: absolute;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
background-color: transparent;
margin: 0px;
padding: 0px;
}
.group1 {
top: 40%;
}
.group2 {
top: 62%;
}
.hovereffect p {
width: 30%;
text-transform: none;
font-size: 15px;
line-height: 2;
}
.hovereffect p a {
color: #fff;
}
.hovereffect p a:hover,
.hovereffect p a:focus {
opacity: 0.6;
filter: alpha(opacity=60);
}
.hovereffect a i {
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
padding: 10px;
font-size: 20px;
}
.group1 a:first-child i {
-webkit-transform: translate3d(-60px, -60px, 0) rotate(45deg) scale(2);
transform: translate3d(-60px, -60px, 0) rotate(45deg) scale(2);
}
.group1 a:nth-child(2) i {
-webkit-transform: translate3d(60px, -60px, 0) rotate(45deg) scale(2);
transform: translate3d(60px, -60px, 0) rotate(45deg) scale(2);
}
.group2 a:first-child i {
-webkit-transform: translate3d(-60px, 60px, 0) rotate(45deg) scale(2);
transform: translate3d(-60px, 60px, 0) rotate(45deg) scale(2);
}
.group2 a:nth-child(2) i {
-webkit-transform: translate3d(60px, 60px, 0) rotate(45deg) scale(2);
transform: translate3d(60px, 60px, 0) rotate(45deg) scale(2);
}
.hovereffect:hover hr:nth-child(2) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg) scale3d(1, 1, 1);
transform: translate3d(-50%, -50%, 0) rotate(0deg) scale3d(1, 1, 1);
}
.hovereffect:hover hr:nth-child(3) {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg) scale3d(1, 1, 1);
transform: translate3d(-50%, -50%, 0) rotate(90deg) scale3d(1, 1, 1);
}
.hovereffect:hover .group1 i:empty,
.hovereffect:hover .group2 i:empty {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0) rotate(45deg) scale(1);
opacity: 1;
filter: alpha(opacity=100);
}
