在悬停时(从背景到顶部)填充图像(作为背景)

时间:2019-06-27 04:30:42

标签: css

我有一个图像作为背景,我需要在鼠标悬停时从下到上覆盖它。

我尝试用

实现
background-image: linear-gradient(to top, #414042 50%, #fff 50%);

但是问题是我的图像已经作为背景了

<style>
main{
position:relative;
z-index:0;
}
.image-wrapper{
width: 200px;
}
.image{
background: url('http://example.com/my/image')
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
}
</style>
<main>
<div class="image-wrapper">
    <div class="image"></div>
</div>
</main>

所以我想要的输出是,将鼠标悬停在这张图片上时,它会从下到上覆盖

这是我需要的简单图片: https://ibb.co/RbCdkks

3 个答案:

答案 0 :(得分:1)

这可以使用after beforetransition属性来实现。请检查代码段。

main{
position:relative;
z-index:0;
}
.image-wrapper{
width: 200px;
}
.image{
 position:relative;
background: url('http://example.com/my/image')
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 200px;
 background-image: linear-gradient(to top, #414042 100%, #fff 100%);
  -webkit-transition: width 2s; /* Safari prior 6.1 */
  transition: width 2s;
  width:100%;
  overflow:hidden;
}

.image:after{

 background: #ff0000;
  position:absolute;
  width:100%;
  height:200px;
  bottom:-200px;
  left:0px;
  content:"";
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;

}

.image:hover:after{

 background: #ff0000;
  position:absolute;
  width:100%;
  height:200px;
  bottom:0px;
  left:0px;
}
<main>
<div class="image-wrapper">
    <div class="image"></div>
</div>
</main>

答案 1 :(得分:0)

这是您的解决方案,如果您需要图像,则图像链接在输出中显示不正确,然后根据需要添加图像

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #7F7F7F;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<div class="container">
<img src="data:image/jpeg;base64,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" class="image">
  <div class="overlay">
    <div class="text"></div>
  </div>
</div>

答案 2 :(得分:0)

您可以使用CSS :after伪属性来实现图像填充动画

 main {
   position: relative;
   z-index: 0;
}

.image-wrapper {
    width: 200px;
}
.image {
    background: url("https://images.unsplash.com/photo-1561549603-b2375b9aface?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.image:after {
    content: " ";
    position: absolute;
    top: 200px;
    height: 200px;
    transition: all ease 0.4s;
}

.image:hover:after {
    top: 0;
    width: 100%;
    background: #BB2B5B;
}
<main>
    <div class="image-wrapper">
        <div class="image"></div>
    </div>
</main>