转换问题：将鼠标悬停在图像CSS/HTML上_Html_Css

转换问题：将鼠标悬停在图像CSS/HTML上

html css

转换问题：将鼠标悬停在图像CSS/HTML上,html,css,Html,Css,在尝试建立我的摄影网站时，我遇到了一个我不能完全理解的错误。我对这个很陌生，所以它可能是一些基本的东西，但我不明白我试图在图像上获得悬停效果，经过多次尝试后，我让它开始工作。问题是，每次我加载我的网站时，图像都会“抖动”，并有一个超快速的悬停，然后消失我在这里链接我的HTML和CSS。它看起来有点凌乱，因为我试图想出一种方法来创建固定大小的盒子，在那里我可以插入我的图片（显然成功了）要解决此问题，可以使用“过渡”属性，该属性允许您控制是循环还是动画的持续时间下面的代码将为您提供一个示例，

在尝试建立我的摄影网站时，我遇到了一个我不能完全理解的错误。我对这个很陌生，所以它可能是一些基本的东西，但我不明白

我试图在图像上获得悬停效果，经过多次尝试后，我让它开始工作。问题是，每次我加载我的网站时，图像都会“抖动”，并有一个超快速的悬停，然后消失

我在这里链接我的HTML和CSS。它看起来有点凌乱，因为我试图想出一种方法来创建固定大小的盒子，在那里我可以插入我的图片（显然成功了）

要解决此问题，可以使用“过渡”属性，该属性允许您控制是循环还是动画的持续时间

下面的代码将为您提供一个示例，说明您想要的东西，但结果更平滑、持续时间更长。希望此解决方案有效：）

.container:hover.overlay{
过渡：不透明度。5s缓解；
}

指定您只想转换不透明度，而不是每个属性

转换：不透明度。5s轻松同时在鼠标悬停区域内移动过渡段您是否在本地编辑它？你有没有试过把它放在一个真实的环境中，比如测试它？如果这是我所想的，那么它在联机时可能不会发生。@ZohirSalak我按照你说的做了，现在初始悬停消失了，但当我重新加载页面时，图像仍然抖动。是的，我认为这可能会解决它，因为这是一个常见问题，现在我已经运行了你的代码，我没有看到任何抖动。你介意放一段代码来说明这个问题吗？@Azametzin我正在使用DreamWaever，我也在从硬盘在线加载它。Dreamweaver中没有出现任何错误，但我没有在那里加载页面。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AURORA CATERA -- 2020 ALL RIGHT RESERVED</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="wrapper">
        <div class="header">
<h1>AURORA CATERA</h1>
    <p>photographer / film maker</p>
    </div>

    <div class="menu">
    <ul>
        <li><a href="#">ALL</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="https://www.instagram.com/auroracatera"><i class="fa fa-instagram"></i></a>
    </ul>
    </div>
        </div>

    <div class="container">
        <div class="box">
            <div class="imgBox">
                <img src="img/A236_INSTA_webfit.jpg">
             </div>
            <div class="overlay">
                <div class="content">
                    <h2>YUMI</h2>
            </div>
            </div>
                </div>
        <div class="box" src="#" alt="ciao"></div>
        <div class="box" src="#" alt="ciao"></div> 
        <div class="box" src="#" alt="ciao"></div>
        <div class="box" src="#" alt="ciao"></div>
        <div class="box" src="#" alt="ciao"></div> 
        <div class="box" src="#" alt="ciao"></div>
        <div class="box" src="#" alt="ciao"></div>
        <div class="box" src="#" alt="ciao"></div> 
    </div>

</body>
</html>

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300&display=swap');

body{
    margin: 0;
    padding: 0;
    background-color: black;
}
h1{
    color: white;
    font-family: Poppins;
    font-size: 36px;
    margin-left: 60px;
    margin-top: 20px;
}

p{
    color: white;
    margin-left: 60px;
    margin-top: -35px;
    font-family: Cormorant Garmond;

}


.header{
    padding: 5px 0px;
    display: inline-block;
    width: 100%;
}

.menu{
    float: right;
    position: relative;
    top: -105px;
    left: 0px;
    margin-right: 20px;

}
.menu ul li{
    display: inline-block;
    float: left;
    line-height: 28px;
    margin-top: 10px;
}
.menu ul li a{
    text-decoration: none;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 15px;
    padding: 5px 10px;
}

.container{
    width: 1280px;
    margin: 70px auto 0;
    display: flex;
    float-direction: row;
    flex-wrap: wrap;
}
.container .box{
    position: relative;
    width: 400px;
    height: 300px;
    background: #8D4D4E;
    margin: 10px;
    box-sizing: border-box;
    display: inline-block;
}


.container .box .imgBox{
    position: relative  
}


.container .box .imgBox img{
    max-width: 100%;
}

.container .box .details{
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 30px;
}

.overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background: rgba(229,229,229,1.00)
}

.container:hover .overlay{
    opacity: 1;
}