编辑:我想将鼠标悬停在每个图像div上,并在旧图像顶部的角落显示新图像
我的HTML代码:
<div id="section-content2">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
我的CSS代码:
#section-content2 {
width:60%;
margin:auto;
height:60%;
max-height: 100%;
padding-top:2%;
position:relative;
display: block;
}
#image-1 {
display: block;
color: #f5f5f5;
font-size: 60px;
float:left;
background-image:url(../../images/adventure-beautiful-camping-388303.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:48%;
padding-bottom:400px;
}
#image-2 {
display: block;
float:right;
background-image:url(../../images/adventure-camping-clouds-743765.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width:48%;
padding-bottom:400px;
}
答案 0 :(得分:0)
是的,它可能,这是一个快速的例子。根据要求添加任何图像。请发布您的代码,以便于提供帮助。
.container {
position: relative;
width: 320px;
height: 240px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
color: #333;
}
&#13;
<div class="container">
<div class="text">Hello World</div>
<div class="overlay">
<img src="images/pexels-photo-440731.jpeg" width="320" height="240" alt="Hi" class="image">
</div>
</div>
&#13;