どのように重複を避けることができますか？

Question

私は画像上にホバー複数のアイコンを表示しようとしたい。マウスが画像をホバリングしているときに、複数のフォントのすばらしいアイコンが異なるリンクで表示されます。

アイコンが重なってしまいます。

どのように避けることができますか？

ここに私のコードです。

HTML

<div class="profile-img-container"> 
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> 
    <a href="#"><span class="fa fa-youtube"></span></a> 
    <a href="#"><span class="fa fa-facebook"></span></a> 
</div> 

CSS

.profile-img-container { 
    position: relative; 
    display: inline-block; /* added */ 
    overflow: hidden; /* added */ 
     display: inline-block; 
} 

.profile-img-container img {width:100%;} /* remove if using in grid system */ 


.profile-img-container img:hover { 
    opacity: 0.5; 
     display: inline-block; 
} 
.profile-img-container:hover a { 
    opacity: 1; /* added */ 
    top: 0; /* added */ 
    z-index: 500; 
     display: inline-block; 
} 
/* added */ 
.profile-img-container:hover a span { 
    top: 50%; 
    position: relative; 
    left: 0; 
    right: 0; 
    transform: translateY(-50%); 
     display: inline-block; 
} 
/* added */ 
.profile-img-container a { 
    display: block; 
    position: absolute; 
    top: -100%; 
    opacity: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    text-align: center; 
    color: inherit; 
     display: inline-block; /* added */ 
} 

DEMO:Jsfiddle

Answer 1

あなたは要素と中央その要素の代わりに、個々のアイコンでそれらをラップすることができます。

.profile-img-container { 
 
    position: relative; 
 
    display: inline-block; /* added */ 
 
    overflow: hidden; /* added */ 
 
\t \t display: inline-block; 
 
} 
 

 
.profile-img-container img {width:100%;} /* remove if using in grid system */ 
 

 

 
.profile-img-container img:hover { 
 
    opacity: 0.5; 
 
\t \t display: inline-block; 
 
} 
 
.profile-img-container:hover .icons { 
 
    opacity: 1; /* added */ 
 
    z-index: 500; 
 
} 
 
.icons { 
 
    opacity: 0; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    position: absolute; 
 
} 
 

 
/* added */ 
 
.profile-img-container a { 
 
    color: inherit; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="profile-img-container"> 
 
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> 
 
    <div class="icons"> 
 
    <a href="#"><span class="fa fa-youtube fa-5x"></span></a> 
 
    <a href="#"><span class="fa fa-facebook fa-5x"></span></a> 
 
    </div> 
 
    
 
</div>

Answer 2

容器の中にアイコンを置くと右のzインデックスでそれらを中心にしてトリックを行います。下記参照。

.profile-img-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    /* added */ 
 
    overflow: hidden; 
 
} 
 

 
.profile-img-container img { 
 
    width: 100%; 
 
    position: relative; 
 
    z-index: 2 
 
} 
 

 

 
/* remove if using in grid system */ 
 

 
.profile-img-container img:hover { 
 
    opacity: 0.5; 
 
    display: inline-block; 
 
} 
 

 
.profile-img-container:hover .icon-cont { 
 
    opacity: 1; 
 
} 
 

 
.icon-cont { 
 
    text-align: center; 
 
    position: absolute; 
 
    opacity: 0; 
 
    top: 50%; 
 
    transition: .4s; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 5; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="profile-img-container"> 
 
    <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" /> 
 
    <div class="icon-cont"> 
 
    <a href="#"><span class="fa fa-youtube fa-5x"></span></a> 
 
    <a href="#"><span class="fa fa-facebook fa-5x"></span></a> 
 
    </div> 
 
</div>