鼠標懸停效果推圖像下來

Question

這裏是media div與on hover X我有一個形象：

這裏是當你點擊div和上傳照片的圖像。正如你所看到的，它很適合在盒子裏面。

最後這裏是一個div當我hover over圖像看X。

正如你所看到的圖像得到下推。 我的最終結果是不是有它懸停在圖像和不影響圖像的位置

這裏是我的CSS：

.x { 
    color:red; 
    #width:50px; 
    #height:50px; 
    display:none; 
    #left:50px; 
} 
.MediaPreview:hover > .x { 
    display:block; 
} 
.MediaPreview { 
    position: absolute; 
    width: 128px; 
    height: 72px; 
    background-color: #e0e0e0; 
    cursor: default; 
} 

這裏是我的HTML：

<div class="MediaPreview" style="left: 10px; bottom: 10px;"> 
    <span>Image or video, required</span> 
    <div class="x">x</div> 
</div> 

Answer 1

試試這個？

.x { 
    color:red; 
    #width:50px; 
    #height:50px; 
    display:none; 

    top: 10px; 
    left: 10px; 
    position: absolute; 
    z-index: 1; 

} 
.MediaPreview:hover > .x { 
    display:block; 
} 
.MediaPreview { 
    position: absolute; 
    width: 128px; 
    height: 72px; 
    background-color: #e0e0e0; 
    cursor: default; 
} 

Answer 2

您需要申請position:absolute到.x，不.MediaPreview。試試這個：

.x { 
    color:red; 
    display:none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.MediaPreview:hover > .x { 
    display:block; 
} 
.MediaPreview { 
    position: relative; 
    width: 128px; 
    height: 72px; 
    background-color: #e0e0e0; 
    cursor: default; 
} 

Answer 3

這是如何完成工作。使用純CSS

<div class="mediapreview"> 

<a href="#" class="upsize red">X</a> 

<img src="http://hub.n2growth.com/wp-content/uploads/2012/04/About-People-2.jpg" alt="people" class="responsive"> 

</div> 

DEMO

Answer 4

你可以試試這個： https://jsfiddle.net/maky/gqn1nrxj/

.x { 
    color:red; 
    display:none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.MediaPreview:hover > .x { 
    display:block; 
} 
.MediaPreview { 
    position: relative; 
    padding:10px; 
    width: 200px; 
    height: 200px; 
    background-color: #e0e0e0; 
    cursor: default; 
}