Social Share Content Locker

Lock your content with this snippet, to unlock visitors will need to share one of the social links, ideal for blog articles, posts, increase your websites visibility.

HTML CSS JavaScript Output Live Updates

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css";
html, body {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    padding: 10px;
    background: #f7f8f9;
}
#sociallocker {
    background-color: #EEEEEE;
    text-align: center;
    position: relative;
    max-width: 500px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius:10px;
}
#sociallocker-overlay {
    background-color: rgba(0,0,0,0.6);
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    transition: all 0.2s ease;
}
#sociallocker-overlay i {
    margin-right: 10px;
}
#sociallocker:hover #sociallocker-overlay {
    top: -100%;
    transition: all 0.2s linear;
}
#sociallocker:hover #sociallocker-content {
    top: 100%;
    transition: all 0.2s linear;
}
#sociallocker-content a {
    display: inline-block;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #777777;
    color: #f9f9f9;
    border-radius: 4px;
    font-weight: bold;
}
#sociallocker-overlay,
#sociallocker-content,
#sociallocker-links{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}
#sociallocker-content {
    background-color: #ccc;
    transition: all 0.2s ease;
}
.social-1 {
	text-decoration: none;
    color: #ffffff;
    display: inline-block;
    width: 60px;
    height: 60px;
    overflow: hidden;
	margin-right: 5px;
}
.social-1 i {
	display: flex;
  	align-items: center;
  	justify-content: center;
    height: 100%;
}
.social-1:hover i {
	background-color: rgba(0,0,0,0.1);
    transform: scale(1.2);
    transition: all 0.2s;
}
.fb { background-color: #4561A8; }
.tw { background-color: #17ADEA; }
.gp { background-color: #BF3B28; }
.in { background-color: #1679B1; }
.pi { background-color: #D9303C; }
.su { background-color: #E84930; }