画像にアイコンを追加する（画像情報の削除と編集用）

Question

画像のアイコンの位置を定義する際に問題があります。 私の現在のビジュアル：

、私はこのような何かを持っているしたいと思います：

とホバーに私はこのように、編集アイコンを持っているしたいと思います：

私の現在のhtml：

<div class="artist-collection-photo"> 
       <button class="close" type="button">×</button> 
       <a data-target="#photo-fields-5-0" data-toggle="modal"> 
        <img width="120" height="120" alt="image.jpg" class="img-thumbnail"> 
        </a> 
       </div> 

とCSS：Photoshopで編集した例画像

ありがとう：私はあなたの助けをいただければ幸いです

.artist-collection-photo { 
    float: left; 
    margin: 10px; 
    cursor: pointer; 
    width: 120px; 
    height: 120px; 
} 

は、私は視覚的な部分:(

PSと恐ろしいですよ！

Answer 1

私は、これはあなたが欲しいものだと思う：https://jsfiddle.net/c259LrpL/30/

はその後.artist-collection-photo {position: relative;}

を設定し、これはtop: 0;とright: 0;

.artist-collection-photo { 
    float: left; 
    margin: 10px; 
    cursor: pointer; 
    width: 120px; 
    height: 120px; 
    position: relative; 
} 
.close{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 9999; 
} 

を使用して、それを配置し、その後、画像内のボタンを配置します .close{position: absolute;}

を設定しました

フェード部分については、以下を参照してください。https://jsfiddle.net/c259LrpL/31/

.img-thumbnail { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 

.img-thumbnail:hover { 
    opacity: 0.5; 
} 

Answer 2

http://www.bootply.com/IRZvpTK41g

あなたの含むDIV（写真）は、相対的な位置に設定する必要があり、ボタンXは、position:absoluteに設定する必要があります。測定値を微調整します。ホバー上でボタンの色を変更するには、button:hover疑似クラスを追加し、そこで色を変更します。