码迷,mamicode.com
首页 > Web开发 > 详细

使用HTML和CSS创建图像叠加悬停

时间:2020-06-28 09:46:39      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:position   char   back   loading   情况下   建图   过渡   set   aqs   

HTML代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayLeft"></div> </div> </center> </body> 
</html>

 

CSS代码:设置容器相对于其正常位置的位置,并定义其宽度和高度。使覆盖层起作用的关键是将其位置设置为绝对位置。这意味着其相对于其最接近的祖先的位置,在这种情况下是图像。

因此,覆盖层并不总是存在,而是仅在用户将鼠标悬停在图像上方时显示,将其不透明度设置为零,表示完全透明。

使用“背景颜色”设置叠加层的颜色。使用“过渡”,以便逐渐显示叠加层,而不是在图像上弹出。由于我们将叠加层的不透明度设置为零,因此当我们将鼠标悬停在容器上时,我们希望将不透明度设置为1。

这意味着,一旦用户将鼠标悬停在容器项上,叠加层就会出现。

<style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } </style>

 

淡入叠加:叠加的宽度和高度等于div图像的宽度和高度。将鼠标悬停在图像上后,叠加层将显示在该图像的顶部。

代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayFade { height: 250px; width: 250px; top: 0; left: 75px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayFade"></div> </div> </center> </body> 
</html>

 

输出:

 

左侧叠加层:叠加层的高度是图像的高度(100%)。宽度为零,并设置为左侧。将鼠标悬停在图像上并逐渐从左向右移动时,宽度将设置为100%。

代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayLeft{ height: 100%; width: 0; top: 0; left: 75px; ; } 
.container:hover .overlayLeft{ width: 250px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayLeft"></div> </div> </center> </body> 
</html>

 

输出:

技术图片


左侧叠加层:叠加层的高度是图像的高度(100%)。宽度为零,并设置为左侧。将鼠标悬停在图像上并逐渐从左向右移动时,宽度将设置为100%。

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayLeft{ height: 100%; width: 0; top: 0; left: 75px; ; } 
.container:hover .overlayLeft{ width: 250px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayLeft"></div> </div> </center> </body> 
</html>

 

输出:

 

右侧叠加层:叠加层的高度是图像的高度(100%)。宽度为零,并设置为右。将鼠标悬停在图像上并逐渐从右向左移动时,宽度将设置为100%。

代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayRight{ height: 100%; width: 0; top: 0; right: 75px; ; } 
.container:hover .overlayRight{ width: 250px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayRight"></div> </div> </center> </body> 
</html>

 

输出:

 

顶部叠加层:叠加层的宽度是图像的宽度(100%)。高度为零并设置为顶部。将鼠标悬停在图像上并逐渐从上到下移动时,高度将设置为100%。

代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayTop{ width: 250px; height: 0; top: 0; right: 75px; ; } 
.container:hover .overlayTop{ height: 250px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayTop"></div> </div> </center> </body> 
</html>

 

输出:

技术图片

 

底部叠加层:叠加层的宽度是图像的宽度(100%)。高度为零,并设置为底部。将鼠标悬停在图像上并逐渐从下往上移动时,高度将设置为100%。

代码:

<!DOCTYPE HTML> <html> 
<head> <meta charset="UTF-8"> <title>Image Overlay</title> <style> body { text-align: center; } 
h1 { color: green; } 
.container img { width: 250px; height: 250px; } 
.container { position: relative; width: 400px; height: auto; } 
.overlay { position: absolute; transition: all 0.3s ease; opacity: 0; } 
.container:hover .overlay { opacity: 1; } 
.overlayBottom{ width: 250px; height: 0; bottom: 0; right: 75px; ; } 
.container:hover .overlayBottom{ height: 255px; } </style> </head> 
<body> <center> <h1 class="title"> GeeksforGeeks </h1> <b>Image Overlay</b> <br> <br> <div class="container"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" class="image"> <div class="overlay overlayBottom"></div> </div> </center> </body> 
</html>

 

使用HTML和CSS创建图像叠加悬停

标签:position   char   back   loading   情况下   建图   过渡   set   aqs   

原文地址:https://www.cnblogs.com/xiewangfei123/p/13201018.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!