在圖像上創建文本溢出

我想對我製作的某些圖像產生漂亮的懸停效果。我想在鼠標懸停圖像時顯示文本。我可以使文本工作，但我想有一個背景，使其更具可讀性。在圖像上創建文本溢出

這裏是HTML：

<div class="portfolio-frame"> 
    <div class="portfolio-overflow-hidden">             
    <img width="420" height="236" src="http://benjaminbinauld.lfdb.fr/files/2013/03/mire-servitel16-9.jpg" /> 
    <div class="portfolio-overlay"> 
     <span class="text-overlay">Click here boy !</span> 
    </div> 
    </div> 
</div>

而CSS：

.portfolio-frame { 
    height: 94px; 
    width: 165px; 
    margin-left: 10px; 
    margin-top: 46px; 
    z-index:1; 

} 
.portfolio-overflow-hidden { 
    height: 94px; 
    width: 165px; 
} 
.portfolio-overlay .text-overlay { 
    display: none; 
} 
.portfolio-frame:hover .portfolio-overlay { 
    display:block; 
    position:inherit; 
    z-index:999; 
    background-color: #000; 
} 
.portfolio-frame:hover .text-overlay { 
    display:block; 

    z-index:999; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
    margin-top: -45px; 
}

我做真人版在這裏：http://jsfiddle.net/fzKe7/

來源

2013-05-16 Xavier

您需要添加position:relative到.portfolio-overlay

見小提琴here

你也可以整理一下你的CSS：

.portfolio-frame { 
    height: 94px; 
    width: 165px; 
    margin-left: 10px; 
    margin-top: 46px;  
} 

.portfolio-overflow-hidden { 
    height: 94px; 
    width: 165px; 
} 

.portfolio-overlay .text-overlay { 
    display: none; 
    position:inherit; 
    background-color: #000; 
    position:relative; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #fff; 
    top:-45px; 
} 

.portfolio-frame:hover .text-overlay { 
    display:block; 
}

來源

2013-05-16 10:12:13 ediblecode

.portfolio-frame:hover .portfolio-overlay { display:block; position:relative; z-index:999; background-color: #000; }

更改位置相對。這應該工作

來源

2013-05-16 10:14:32 Abhimanyu

在圖像上創建文本溢出

回答

相關問題