CSS 文字覆蓋圖像懸停效果

文字覆蓋懸停效果：

transtion 屬性可以被指定為一個或是多個CSS屬性的過渡效果，多個屬性之間用逗號進行分隔。

每個單屬性轉換都描述了應該用於單個屬性的轉換（或特殊值 all 和 none）包括：

1、0或1個值，表示轉換適用的屬性，包括以下幾種情況：

• 關鍵字none
• 關鍵字all
• 命名CSS屬性的 custom-ident（用戶自定義的字符串標識符）

2、0或1個過渡的速度曲線值表示要使用的過渡函數

3、0 、1或2個time 時間值。

• 可以解析為時間的第一個值被分配為 transtion-duration（過渡動畫所需要的時間）
• 可以解析為時間的第二個值被分配給 transtion-delay（過渡動畫開始前的所需的時間，延遲時間）

當鼠標懸停圖片上，文字就會上浮到圖片上。

HTML 部分

<p>鼠標移動到圖片上查看效果</p>

 <div class='container'>
     <img src="11.jpg" alt="spring" class='image'>
     <div class='overlay'>
         <div class='text'>Hello World</div>
     </div>
 </div>

 

一、文字覆蓋圖像懸停效果（淡出效果）

CSS代碼

在實現淡出效果的時候，遮蓋元素相對定位於圖像在其正上方，並且與父元素同等大小。

設置透明度為0完全透明，當鼠標移動到圖像上，透明度變為 0.7，遮蓋元素就會顯示出來。

.container{
            position:relative;
            /* 容器盒子相對定位 */
            width:50%
        }
        .image{
            display:block;
            /* 將圖片轉換為塊元素 */
            width:100%;
            height:auto;
            /* 元素高度設置為auto，保持圖片原有縱橫比 */
        }
        .overlay{ 
            /* 遮蓋元素 */
            position:absolute; 
            top:0;
            bottom:0;
            left:0;
            right:0;
            /* 相對父元素，距離上下左右都是0，相對定位在父元素之上 */
            height:100%;
            width:100%;
            /* 寬高100%，和父元素同等大小 */
            opacity:0;
            /* 透明度 */
            transition:1s ease;
            background-color:#2e8e9a;
        }
        .container:hover .overlay{
            opacity:.7;
            /* 透明度 0.7 */
        }

        .text{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            /* 絕對定位設置偏移量，將元素居中定位 */
            color:white;
            font-size:20px;
            font-weight:bold;
            font-size:30px;
            /* 文字樣式 */
        }

 

二、文字覆蓋圖片懸停效果（從上到下）

CSS代碼

 .container{
            position:relative;
            width:50%;
        }
        .image{
            display:block;
            width:100%;
            height:auto;
            /* 將圖片設置為塊元素，保持圖片的縱橫比 */
        }
        .overlay{
            position:absolute;
            bottom:100%;
            left:0;
            right:0;
            background-color:#2e8e9a;
            overflow:hidden;
            width:100%;
            height:0;
            /* opacity:0.6; */
            transition: .5s ease;
            /* 相對於container定位，距離父元素底面100%，在元素上面，不顯示 
            過渡使得位移有着時間過渡，而不是突然出現*/
        }
        .container:hover .overlay{
            bottom:0;
            height:100%;
            opacity:0.7;
            /* 鼠標懸浮在元素上時，距離定位底面相距0，高度相對父元素為100%，
            bottom為0 ，所以定位在上面的元素才會改變
            （這些樣式的實現，由一個過渡緩沖 transition）
            最終透明度達到 0.7*/
        }
        .text{
            white-space:nowrap;
            color:white;
            font-size:30px;
            position:absolute;
            overflow:hidden;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-weight:bold;
            /* 設置覆蓋文字的樣式：無折行、字體白色加粗30px、絕對定位設置偏移量 */
        }

 

 

三、文字覆蓋圖像懸停效果（從右向左）

CSS代碼

.container{
            position: relative;
            width: 50vw;
        }
        .image{
            display: block;
            width: 100%;
            height: auto;
        }
        .overlay{
            position:absolute;
            bottom:0;
            left:100%;
            top:0;
            background-color:#2e8e9a;
            overflow:hidden;
            height:100%;
            width:0;
            transition:.5s ease;
        }
        .container:hover .overlay{
            left:0;
            width:100%;
            opacity:0.7;
        }
        .text{
            white-space:nowrap;
            color:white;
            font-size:30px;
            position:absolute;
            overflow: hidden;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            font-weight: bold;
        }

 

四、文字覆蓋圖像懸停效果（淡入透明）

HTML代碼

<h3>淡入透明</h3>
<p>鼠標移動到圖片上查看效果</p>
    <div class='container'>
        <img src="11.jpg" alt="spring" class='image'>
        <div class='overlay'></div>
            <div class='text'>Hello World</div>
    </div>

CSS代碼

.container{
            position:relative;
            width:50%;
        }
        .image{
            display:block;
            width:100%;
            height:auto;
            opacity:1;
            transition:.5s ease;
            backface-visibility:hidden;
            /* 背面隱藏 */
        }
        .overlay{
            transform:.5s ease;
            opacity:0;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        .container:hover .image{
            opacity:0.2;
        }
        .container:hover .overlay{
            opacity:1;
        }
        .text{
            white-space:nowrap;
            opacity:0.5;
            background-color:#2e8e9a;
            color:white;
            font-size:30px;
            padding:20px;
            text-align:center;
            vertical-align: middle;
        }

 

---

參考資料：

https://www.runoob.com/css/css-examples.html