Skip to content

Instantly share code, notes, and snippets.

@bradsknutson

bradsknutson/index.html

Forked from briankross/index.html
Created September 4, 2013 04:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bradsknutson/6432814 to your computer and use it in GitHub Desktop.
Save bradsknutson/6432814 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test | CSS3 Slide Rollover Social Media Icons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="social-slide">
<div class="social-image">
<a href="https://twitter.com/" target="_blank">
<img src="assets/icons/social-icon-twitter.png" alt="Follow us on Twitter" />
</a>
</div>
</div>
</body>
</html>
Raw
style.css
.social-slide {
/* Controls image height visibility */
height: 24px;
/* Controls image width visibility */
width: 24px;
/* Hides bottom half of the image */
overflow: hidden;
margin: 10px;
float: left;
}
.social-slide:hover {
box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.8);
}
.social-slide img {
position: absolute;
top: 0px;
/* Controls overall image height */
height: 48px;
/* Controls overall image width */
width: 24px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide img:hover {
top: -24px;
}
.social-image {
position: relative;
/* Controls image height window */
height: 48px;
/* Controls image width window */
width: 24px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment