悬停在div上时如何从角落过渡图像?

时间:2018-04-09 14:48:54

标签: html css hover css-transitions

当我将鼠标悬停在div上时,我想让图像从一个角落慢慢显示,但我似乎无法在线找到这种类型的过渡。用普通的CSS和HTML可以实现这个吗?

编辑:我想将鼠标悬停在每个图像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;
}

1 个答案:

答案 0 :(得分:0)

是的,它可能,这是一个快速的例子。根据要求添加任何图像。请发布您的代码,以便于提供帮助。

&#13;
&#13;
.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;
&#13;
&#13;