|
|
|
|
|
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1366
|
|
| Слышу гимн зашитых ртов |
 |
|
|
|
|
 Дата: Вторник, 25.06.2019, 18:55/ Сообщение №: 1
|
|
Рипал: Бармен
Ссылка на скачивание!
Вставляем в Нижнею часть сайта:
Код
<div id="social">
<div class="container-relative">
<div class="social-container">
<a href="#" target="_blank">
<img class="idle" src="/img/social-fb.png">
<img class="hover" src="/img/social-fb-hover.png">
</a>
</div>
<div class="social-container">
<a href="#" target="_blank">
<img class="idle" src="/img/social-tw.png">
<img class="hover" src="/img/social-tw-hover.png">
</a>
</div>
<div class="social-container">
<a href="#" target="_blank">
<img class="idle" src="/img/social-yt.png">
<img class="hover" src="/img/social-yt-hover.png">
</a>
</div>
</div>
</div>
CSS:
Код
.container-relative{
position: relative;
}
.social-container{
display: block;
height:25px;
margin-bottom:15px;
margin-left:auto;
position: relative;
width:25px;
}
.social-container a{
display: block;
height:100%;
overflow:hidden;
width:100%;
}
.social-container a:before{
background:white;
border-radius:50%;
content:'';
height:100%;
left:0;
position: absolute;
top:0;
transform:scale(0);
transition:250ms transform;
width:100%;
}
.social-container a:hover:before{
transform:scale(1);
}
.social-container a:after{
background:url(/img/social-circle.png)no-repeat center;
background-size:contain;
content:'';
left:0;
height:100%;
position: absolute;
top:0;
transform:scale(1);
transition:250ms transform;
width:100%;
}
.social-container a:hover:after{
transform:scale(0);
}
.social-container a img{
width:100%;
}
.social-container a img.idle{
opacity:1;
}
.social-container a img.hover{
height:100%;
left:0;
position: absolute;
opacity:0;
top:0;
width:100%;
}
.social-container a:hover img.idle{
opacity:0;
}
.social-container a:hover img.hover{
opacity:1;
}
#social{
left:auto;
margin:2em auto;
position: relative;
right:auto;
top:auto;
transform:none;
z-index: 4;
text-align:center;
}
#social .container-relative{
display:inline-block;
}
#social .container-relative .social-container{
margin-right:14px;
}
#social .container-relative:before, #social .container-relative:after{
content:'';
height:1px;
position: absolute;
width:100px;
}
#social .container-relative:before{
left:-53%;
top:calc(50% - 1px);
background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
#social .container-relative:after{
right:-53%;
top:calc(50% - 1px);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
.social-container{
display: inline-block;
height:35px;
margin-bottom:auto;
margin-left:14px;
width:35px;
}
.social-container a img.idle{
opacity:0.8;
}
Тихо на улице, пусто в квартире..Спасибо реактору №4
|
|
|
|
|
|
|
|
){kind=link}