CSS转换扰乱了整个页面

i put some social icons in site, when i hover the circle around it gets bigger. which is fine by me. but the problem i am facing is that when that div gets bigger, it disturbs the other divs. i tried z-index but dont know why its not working..

我在网站上放了一些社交图标,当我盘旋它周围的圈子变得更大。哪个对我没问题。但我面临的问题是,当div变得更大时,它会扰乱其他div。我试过z-index但不知道为什么它不起作用..

Here is the site which i uploaded for the sake for fixing it..

这是我为了修复而上传的网站..

http://muntazir.mmellahi.com/Muntazir%20prosmatic%20demo%202/

Can anyone help me fix the issue so that if the circle goes big, it do not disturb other divs.

任何人都可以帮助我解决问题,以便如果圆圈变大,它不会打扰其他div。

if you open page and mouse over the social icon on heading you will notice the gallery will go down a bit but when you remove the cursor the gallery will come back to its place.

如果你打开页面并将鼠标悬停在标题上的社交图标上,你会发现画廊会有所下降,但当你移开光标时,画廊将会回到它的位置。

sorry for the poor explanation..

抱歉可怜的解释..

update : Adding Code.

更新:添加代码。

CSS i used for social Icons

CSS我用于社交图标

    .headerSocialIcons{
    float: right;
    margin-top: -44px;
    width: 100%;
}


.headerSocialIcons .SocialIcons{
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
.headerSocialIcons .SocialIcons .link{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px dashed white;
    background-clip: content-box;
    padding: 10px;
    transition: .5s;
    color: #D7D0BE;
    margin-left: 15px;
    margin-right: 15px;
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 28px;
}

.headerSocialIcons .SocialIcons .link span{
    display: block;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.headerSocialIcons .SocialIcons .link:hover{
    padding: 20px;
    color: white;
    margin-left: -5px;
    transform: translateX(10px) rotate(360deg);
}

.headerSocialIcons .SocialIcons .link.google-plus {
    background-color: tomato;
    color: white;
}

.headerSocialIcons .SocialIcons .link.twitter {
    background-color: #00ACEE;
    color: white;
}

.headerSocialIcons .SocialIcons .link.facebook {
    background-color: #3B5998;
    color: white;
}

.headerSocialIcons .SocialIcons a{
    width: 35px;
    height: 35px;
    display: inline-block;
    border-radius: 5px;
    font-family: "scicons";
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
    transition: background-color .2s linear, color .2s linear;
}
.headerSocialIcons .Left{
    display: inline;
    float: left;
    margin-left: 20px;
    width: 350px;

}
.headerSocialIcons .Right{
    float: right;
    margin-right: 20px;
    text-align: right;
    width: 350px;

}

HTML

<div class="headerSocialIcons">
    <div class="SocialIcons Left">
        <a href="#" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
        <a href="#" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
        <a href="#" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
    </div>
    <div class="SocialIcons Right">
        <a href="#" class="link facebook" target="_parent"><span class="fa fa-facebook-square"></span></a>
        <a href="#" class="link twitter" target="_parent"><span class="fa fa-twitter"></span></a>
        <a href="#" class="link google-plus" target="_parent"><span class="fa fa-google-plus-square"></span></a>
    </div>

</div>

1 个解决方案

#1

problem solved. i had to use position:relative with z-index. thankyou.

问题解决了。我不得不使用position:relative与z-index。谢谢。