CSS Rules for creating a social overlay using CSS3

social-overlay.css

/* Set the Width and Height for all objects */
.card, .portrait, .overlay {
	width: 300px;
	height: 300px;
}

/* Used to provide .portrait and .overlay with a reference for positioning */
.card {
    position: relative;
}

.portrait, .overlay {
    position: absolute;
    top: 0;
	left: 0;
}

.portrait {
    background-image: url('../img/jm-portrait@2x.jpg'); /* Add the path to your image file */
    background-position: center center;
	background-repeat: no-repeat;
	background-size: 300px 300px;
	z-index: 10; /* this value should be less than the z-index value of .overlay */
}

.overlay {
    background-color: #000;
    opacity: 0;
    transition: opacity .25s ease-in-out;
   	-moz-transition: opacity .25s ease-in-out;
   	-webkit-transition: opacity .25s ease-in-out;
    z-index: 20;
}

.overlay:hover {
    opacity: .7;
}

.overlay ul {
    width: 300px;
	margin-top: 126px; /* To determine the Margin top, divide the height by half, and then subtract half the height of the icon from the result */
	text-align: center;
}

.overlay ul li {
	display: inline-block;
	width: 48px;
	height: 48px;
	list-style: none;
	margin: 0 4px;
}

.overlay ul li a {
    display: block;
	width: 48px;
	height: 48px;
	background-repeat: no-repeat;
    background-position: center center;
	background-size: 48px 48px;
}

.linkedin { background-image: url('../img/twitter@2x.png');}
.linkedin:hover { background-image: url('../img/twitter-hover@2x.png'); }
.twitter { background-image: url('../img/twitter@2x.png');}
.twitter:hover { background-image: url('../img/twitter-hover@2x.png'); }
.github { background-image: url('../img/twitter@2x.png');}
.github:hover { background-image: url('../img/twitter-hover@2x.png'); }
.dribbble { background-image: url('../img/twitter@2x.png');}
.dribbble:hover { background-image: url('../img/twitter-hover@2x.png'); }