使用淡入淡出效果HTML CSS更改悬停时的背景img [英] Change background img on hover with fade effect HTML CSS

问题描述

我想将两个背景图像设置为div，然后在它们像这样的淡入淡出效果悬停时进行更改.

  .kid {最大宽度:50％；位置:相对；}.kid img {显示:块;不透明度:1;高度:自动；过渡:.6s轻松；宽度:100％;位置:绝对；z-index:12；}.kid img:hover {不透明度:0;}.kid img + img {显示:块;不透明度:1;位置:相对；z-index:10；}  

 < div class ="kid">< img src ="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt =孩子" itemprop =图像" width ="600"高度="750"/>< img src ="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt =成人" width ="600" height ="750"/></div>  

这里是通过将图像放入html代码来完成的.我必须在CSS中将其作为背景图像，因为我制作了两列网格图库(宽度为50％，电压为100vh)，并且不适用于< img> .

这是我的代码.帮助我获得与第一小提琴相同的效果.

  body {保证金:0自动;宽度:100％;高度:100vh}.剩下{向左飘浮;}.对{浮动:对}.col-half-width {宽度:50％;高度:100vh；}.project-01 {背景:#ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg')无重复中心；背景尺寸:封面；}.project-02 {背景:url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg')无重复中心中心；背景尺寸:封面；}.project-01，.project-02 img {最大宽度:100％;}  

 < div class ="col-half-width left project-01"></div>< div class ="col-half-width right project-02"></div>  

解决方案

使用CSS :hover 和 transition 进行尝试.注意:也许您应该预加载图像，以便它在第一次也能顺利运行.

  body {保证金:0自动;宽度:100％;高度:100vh}.剩下{向左飘浮;}.对{浮动:对}.col-half-width {宽度:50％;高度:100vh；}.project-01 {背景:#ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg')无重复中心；背景尺寸:封面；过渡:0.5秒;}.project-01:hover {背景:url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg')无重复中心；背景尺寸:封面；}.project-01，.project-02 img {最大宽度:100％;}  

 < div class ="col-half-width left project-01"></div>  pre>

I want to set two background images to div and then make them changing while hovering with fade effect like this.

.kid {
	max-width:50%;
	position:relative;
}

.kid img {
	display:block;
	opacity:1;
	height: auto;
	transition:.6s ease;
	width:100%;
	position:absolute;
	z-index:12;
}
.kid img:hover {
	opacity:0;
}
.kid img + img {
	display:block;
	opacity:1;
	position:relative;
	z-index:10;
}

<div class="kid">

<img src="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt="Kid" itemprop="image" width="600" height="750" />

<img src="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt="Adult" width="600" height="750" />

</div>

Here it's done by putting image in html code. I have to do this in css as background-image, because I made two column grid gallery (50% width and 100vh) and it doesn't works with <img>.

Here is my code. Help me to get the same effect like in first fiddle.

body{
  margin: 0 auto;
  width: 100%;
  height: 100vh
}
.left{
  float: left;
}
.right{
  float: right
}

.col-half-width{
  width: 50%;
  height: 100vh;
}

.project-01{
  background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
  background-size: cover;

  }

.project-02{
  background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
  background-size: cover;
}
.project-01,
.project-02 img{
  max-width:100%;
}

<div class="col-half-width left project-01"></div>
<div class="col-half-width right project-02"></div>

解决方案

Try it using CSS :hover and transition. Note: perhaps you should preload the image so that it works smoothly on the first time aswell.

body{
  margin: 0 auto;
  width: 100%;
  height: 100vh
}
.left{
  float: left;
}
.right{
  float: right
}

.col-half-width{
  width: 50%;
  height: 100vh;
}

.project-01{
  background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
  background-size: cover;
  transition: 0.5s;

  }

.project-01:hover{
  background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
  background-size: cover;
}
.project-01,
.project-02 img{
  max-width:100%;
}

<div class="col-half-width left project-01"></div>

这篇关于使用淡入淡出效果HTML CSS更改悬停时的背景img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！