如何使用 HTML 和 CSS 创建图像悬停细节？

在本文中，我们将学习如何在图像上创建一种悬停效果以获得其完整的细节。这可以通过使用简单的 HTML 和 CSS 来实现。

我们的项目概述：

方法：

• 我们将首先创建一个 HTML 文件，我们将在其中为我们的图像挂架添加一个图像。
• 然后我们将创建一个 CSS 样式来为包含图像的元素提供动画效果。

我们将首先定义页面的 HTML 和 CSS 部分，如下所示。

HTML 部分：在此部分中，定义了页面的结构。

• 我们将首先创建一个 HTML 文件。
• 然后我们将写出 HTML 页面所需的样板代码。
• 我们接下来将链接 CSS 文件或直接添加提供所有动画效果所需的 CSS。
• 在正文部分，我们将添加一个图像源，以便我们可以显示我们的图像。

index.html

  

    

  

    
hover over gfg logo --)
    

        

        

            
GeeksForGeeks
            

            

                A Computer Science portal for geeks.
                It contains well written,
                well thought and well explained
                computer science and programming
                articles, quizzes and much more..
            
            

            Contact Us
        
        
    

  

CSS 部分：在本部分中，我们将定义页面的 CSS。使用 CSS 我们将提供不同类型的动画和效果
到我们的 HTML 页面，以便它看起来对所有用户都是交互的。

• 我们将首先重置所有浏览器效果，以便所有浏览器上的一切都保持一致。
• 然后我们将定义要赋予元素的样式，包括大小和位置。
• 我们将使用剪辑路径函数为我们的对象提供特定的形状。

样式文件

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000;
}
  
body{
    background-color: rgb(71, 69, 69);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
  
.main_box{
    position: relative;
    width: 42em;
    height: 25em;
    display: flex;
    align-items: center;
    border-radius: 1.5em;
    transition: .5s;
}
  
.main_box .circle{
    position: absolute;
    top: 6%;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5em;
    overflow: hidden;
}
  
.main_box .circle::before{
    content: '';
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(7.5em at center);
    transition: .4s;
}
  
h1{
    margin-right: 1em ;
}
  
.main_box:hover .circle::before{
    clip-path: circle(30em at center);
    background: rgb(20, 220, 43);
}
  
.main_box img{
    top: 50%;
    left: 50%;
    height: 5.75em;
    transform: translate(-50%,-50%);
    position: absolute;
    pointer-events: none;
    transition: 0.4s;
}
.main_box:hover img{
    left: 80%;
    top: 12.25em;
    height: 10em;
}
  
.main_box .content{
    position: relative;
    width: 50%;
    background: rgb(20, 220, 43);
    padding: 1.25em 1.25em 1.25em 2.5em;
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}
  
.main_box:hover .content{
    left: 10%;
    opacity: 1;
    visibility: visible;
}
  
.main_box .content h2{
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
}
  
.main_box .content p{
    color: #fff;
}
  
.main_box .content a{
    position: relative;
    text-decoration: none;
    color: rgb(186, 14, 14);
    padding: .6em 1.25em;
    margin-top: 0.6em;
    display: inline-block;
      
}

输出：