滑鼠移至圖片上方說明文字區塊滑入
滑鼠移至圖片上方的時候，說明文字區塊會從左側滑入的游標互動效果
重點：
- 將文字區塊以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);
}
來源：
迴響列表
目前還沒有任何留言
留言表單