使用CSS实现图片浮动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39305143/article/details/90383943

本文介绍了如何利用CSS实现图片的悬浮效果，通过HTML和CSS代码示例详细讲解了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css实现图片悬浮效果

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
   <div class="image middle">
       <img src="1.jpg" alt="">
       <div class="image-content">
           <h1>ImAGE TITLE</h1>
           <div class="icons">
               <a href="#" class="icon">A</a>
               <a href="#" class="icon">B</a>
               <a href="#" class="icon">C</a>

           </div>
       </div>
   </div>

</body>
</html>

//CSS代码

*{
    margin:0;
    padding: 0;
    font-family: "montserrat", sans-serif;
}
body{
    background: #ddd;
}

.middle{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.image{
    width: 440px;
    height: 300px;
    overflow: hidden;
    cursor: pointer;
 }
 .image-content{
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
    height:100%;
     padding: 40px;
     box-sizing: border-box;
 }
 .image-content h1{
     color: #fff;
     text-transform: uppercase;
     transform: translateY(20px);
     transition: 0.4s;
 }
 .image:hover .image-content h1{
     transform: translateY(0px);
 }
 .icons{
     position: absolute;
     right:40px;
     bottom: 40px;

 }
 .icon{
     display: inline-block;
     text-decoration: none;
     color: #333;
     font-size: 22px;
     margin:0 10px;
      transition:all 0.3s linear;
      transform: translateY(80px);

 }
 .image:hover .icon{
      transform: translateY(0px);
 }
 .icon:nth-child(1){
     transition: transform 0.4s 0.05s ,color 0.4s;
 }

 .icon:nth-child(2){
     transition: transform 0.4s 0.1s ,color 0.4s;
 }
 .icon:nth-child(3){
     transition: transform 0.4s 0.15s ,color 0.4s;
 }
 .icon:hover{
     color:#3498db;
 }

.image-content::before{
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     background: rgba(255,255,255,0.3);
     width:100%;
     height:0px;
     clip-path: polygon(0 100%,100% 0,100% 100%);
     transition: 0.5s;
 }
 .image-content:hover::before{
     height: 140px;
 }