hover的特效

Posted on Edited on In Views: Disqus:

 

許多網站有一些精采的互動效果，有一些要歸功於hover。

 

1、變色或變透明

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script></script>
    <style>
        #myHover {
            background: #f6f6f6;
            width: 100px;
            height: 100px;
            transition: all 0.5s ease 0s;
        }

            #myHover:hover {
                background: #c62127;
            }
    </style>
</head>
<body>
    <div id="myHover"></div>
</body>
</html>

 

2、放大

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script></script>
    <style>
        .wrapper {
            border: solid #c1c1c1 1px;
            width: 260px;
            overflow: hidden;
        }

        img {
            transition: all 0.2s ease-in-out 0s;
            width: 100%;
        }

            img:hover {
                transform: scale(1.06);
            }

        #content p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="myHover">
            <img src="http://i.imgur.com/FTVRTjv.jpg" alt="Alternate Text" />
        </div>
        <div id="content">
            <p>4th i3-4150</p>
        </div>
    </div>
</body>
</html>

 

3、翻轉跳出文字

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
        body, ul {
            margin: 0;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: inline-block;
            width: 400px;
            height: 400px;
            background: #ff9ebc;
            border: 1px solid;
        }

        img {
            width: 100%;
        }

        a.btn_color2 {
            display: inline-block;
            padding: 10px 40px;
            border: 1px solid #FFF;
            font-size: 15px;
            color: #FFF;
        }

        a {
            text-decoration: none;
        }
        
        .Txt {
            position: absolute;
            background: rgba(47,158,210,0.8);
            top: 1px;
            width: 400px;
            height: 400px;
        }

        .Txt {
            vertical-align: middle;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .Txt {
            transform: rotateY(90deg);
            transition: all 0.6s ease;
            transform-style: preserve-3d;
        }

        ul li:hover .Txt {
            transform: rotateY(0deg);
            opacity: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div>
                <img src="http://i.imgur.com/FTVRTjv.jpg" alt="Alternate Text" />
            </div>
            <div class="Txt">
                <div>
                    <h4><em>4th</em>&nbsp;<strong>i3-4150</strong></h4>
                    <div class="btn">
                        <a class="btn_color2" href="http://i.imgur.com/FTVRTjv.jpg" target="_blank">Read More</a>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</body>
</html>

 

4、切換圖片

<!DOCTYPE html>
<html>
<head>
    <title>hover</title>
    <meta charset="utf-8" />
    <style>
        body {
            background: #000000;
            margin: 0;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline-block;
        }

        .cover {
            position: absolute;
            z-index: 0;
        }

        .color {
            position: absolute;
            z-index: 1;
            opacity: 0.1;
        }

            .color :hover {
                opacity: 1;
            }

        .menu3 :hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <ul>
        <li class="menu3">
            <div class="color">
                <img src="http://i.imgur.com/LBJxiKM.png" />
            </div>
            <div class="cover">
                <img src="http://i.imgur.com/vyJOnbJ.png" />
            </div>
        </li>
    </ul>
</body>
</html>

注意，在對已透明的圖片做hover特效時，需要使用z-index來提高層數，

並其父元素也要一併應用hover特效才能讓滑鼠「hover」到該圖片範圍，

進而把hover特效成功做出來。

 

參考資料：

Hover.css - A collection of CSS3 powered hover effects