圖片游標互動效果

滑鼠移至圖片上方說明文字區塊滑入

滑鼠移至圖片上方的時候,說明文字區塊會從左側滑入的游標互動效果

重點:

  1. 將文字區塊以left:-100%藏起來,待需使用時再改成 left:0讓它滑入

效果演示:

 

HTML:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS image Hover effect</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200803-2">
    <div class="container">
        <div class="imageBox">
            <img src="https://fakeimg.pl/800x600/93CCC3/ffffff/?text=hover here" alt="">
            <div class="textBox">
                <h1>艾吉單飛鳥 DAILY CSS</h1>
            </div>
        </div>
    </div>
</body>

</html>

 

CSS:

#dailycss_20200803-2 {
    background-color: #003444;
    margin: 0;
    padding: 0;
}

#dailycss_20200803-2 .container {
    margin: 20px auto;
    width: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);

}

#dailycss_20200803-2 .imageBox {
    position: relative;
    overflow: hidden;
}

#dailycss_20200803-2 .imageBox img {
    width: 100%;
    transition: .3s;
}

#dailycss_20200803-2 .textBox {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(255, 0, 0, .9);
    transition: .5s;
}

#dailycss_20200803-2 .textBox h1 {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    color: #fff;
}

#dailycss_20200803-2 .imageBox:hover .textBox {
    left: 0;

}

#dailycss_20200803-2 .imageBox:hover img {
    transform: scale(1.2);
}

 

來源:




 迴響列表

關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸

用wordpress架網站超級沒有成就感...

最新PO文
Go to Blog
Social Accounts