css3實現滑鼠移入圖片動效_ZenDei技術網路在線

css3實現滑鼠移入圖片動效

-Advertisement-

按照國際慣例先放效果圖貼代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .container{ width:1200px; height:auto; } . ...

按照國際慣例先放效果圖

貼代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .container{
            width:1200px;
            height:auto;
        }
        .container .img-box{
            overflow:hidden;
            position: relative;
            width:240px;
            height:135px;
            display: inline-block;
            cursor:pointer;

        }
        .container img{
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            transition:all .5s;
        }        
        .container .overlay{
            position: absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:2;
            line-height:135px;
            text-align: center;
            background-color: rgba(0,0,0,.5);
            opacity: 0;
        }
        .container .title{
            color:#fff;
        }
        .img-box:hover img{
            transform:scale(1.2);
        }
        .img-box:hover .overlay{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="img-box">            
            <img src="images/1.jpg">
            <div class="overlay">
                <div class="title">圖片標題1</div>
            </div>
        </div>
        <div class="img-box">            
            <img src="images/2.jpg">
            <div class="overlay">
                <div class="title">圖片標題2</div>
            </div>
        </div>
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

SQL Server中GETDATE轉換時間時註意事項

在SQL Server中，有時候查詢數據時，需要限定查詢時間範圍。此時需要對時間進行運算，如下所示： USE AdventureWorks2014;GOSELECT *FROM HumanResources.EmployeeWHERE ModifiedDate > GETDATE() - 20; ... ...
Android 上預覽 PDF 文件

使用 WebView 配合 pdf.js 在 Android 上顯示 PDF 文件 ...
Cookie SameSite屬性介紹及其在ASP.NET項目中的應用

一、Cookie SameSite屬性介紹就像大家已經知道的，一旦設置Cookie之後，在Cookie失效之前瀏覽器會一直將這個Cookie在後續所有的請求中都傳回到Server端。我們的系統會利用Cookie這個特性做很多事情，但通常我們會在Cookie中存放加密的用戶身份，在Server端根據 ...
js自定義的可分類可搜索的下拉框組件

html5搜索框結合datalist可以實現帶搜索功能的下拉框不過嘗試了下，使用optgroup分組發現沒效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>search</title> </head> ...
記一次解析字元串：在目標字元串中找出指定的N個字元串所在的起始位置

我們的項目上有一個這樣的場景：一個下拉選擇框，同時要支持用戶輸入，將最終的結果顯示在文本框中（就是普通的字元串，用戶在下拉框中選擇的放在【】中）……不知道能不能想象出來，寫上一篇筆記的時候發現和咱們博客園選擇“tag 標簽”的功能有點接近啊，我們的ui還是跟她有些不同。還是拿一個具體的例子說一下吧 ...
WePY的開發環境的安裝

2020-03-24 1.安裝Node.js 官網：https://nodejs.org/ 兩個版本 LTS為穩定的長期支持版本 Current為最新的版本安裝完畢後，cmd下輸入 node -v 查看node版本若顯示“不是內部命令。。。。” 請配置環境變數這裡不贅述 2.安裝WePY 運行 ...
ES6實現圖片切換特效（圖片牆效果）

按照國際慣例先放效果圖貼代碼： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="index.css ...
前端基礎CSS篇之一

OXO1 寫在前面 1.HTML和CSS的對比 (1)HTML只關註語義和結構，主要是對網頁元素的整理和分類。 (2)CSS的主要使用場景就是美化頁面，佈局頁面。 (3)CSS和HTML搭配使用，實現網頁結構，表現分離。 2.CSS概述（1）概念 CSS是疊層樣式表（Cascading Style ...