在轉換懸停時在圖像上顯示文本

Question

我試圖創建一個帶有不透明度的淡入淡出轉換（請參閱我的JSFiddle），當您將鼠標懸停在圓上時將會顯示淡入淡出轉換。

如何實現myContent元素的漂亮淡入？

<div class="circle"> 
    <div class="myContent"> 
    <div class="name">Sasasaas</div> 
    <div class="position">asfasfasfas</div> 
    </div> 
</div> 

這是我使用

.circle { 
    width: 300px; 
    height: 300px; 
    border: 1px black solid; 
    border-radius: 200px; 
    background-image: url("http://vignette3.wikia.nocookie.net/yogscast/images/c/c7/Pixel_face_eyebrow_raised_600x600.png/revision/latest/scale-to-width-down/480?cb=20130529234139"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    margin: auto; 
    -webkit-filter: grayscale(50%); 
    -webkit-transition: all 0.5s; 
} 

.circle:hover { 
    -webkit-filter: none; 
} 

.myContent { 
    opacity: 0; 
    width: 170px; 
    height: 170px; 
    text-align: center; 
    padding: 15px; 
    /**position: relative; 
    visibility: hidden; 
    -webkit-transition: visibility 0.5s;**/ 
} 

.circle:hover .myContent { 
    opacity: 1; 
} 

Answer 1

嘗試下面的代碼，添加轉場到.mycontent並設置它的width as 100%，然後通過使用text-align:center和padding-top添加padding-top:50%因此對齊文本到中央的CSS垂直和水平的圖像。

.circle { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px black solid; 
 
    border-radius: 200px; 
 
    background-image: url("http://vignette3.wikia.nocookie.net/yogscast/images/c/c7/Pixel_face_eyebrow_raised_600x600.png/revision/latest/scale-to-width-down/480?cb=20130529234139"); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    margin: auto; 
 
    -webkit-filter: grayscale(50%); 
 
    -webkit-transition: all 0.5s; 
 
} 
 
    
 
.circle:hover { 
 
    -webkit-filter: none; 
 
} 
 
    
 
.myContent { 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 170px; 
 
    text-align: center; 
 
    padding-top: 50%; 
 
    transition: 1s ease; 
 
} 
 
    
 
.circle:hover > .myContent { 
 
    opacity: 1; 
 
}

<div class="circle"> 
 
    <div class="myContent"> 
 
    <div class="name">Sasasaas</div> 
 
    <div class="position">asfasfasfas</div> 
 
    </div> 
 
</div>