在图像上使用CSS对鼠标悬停效果

想要在投资组合的项目部分产生悬停效果

该布局是由CSS网格和悬停的链接，以查看现场演示应该出现响应。动画过渡

尝试了悬停效果，但把布局搞砸了

它必须仅使用css悬停动画且不使用Javascript。

显示链接的悬停效果

@DylanScript给出了解决方案，但无法正常工作。附加图像

第二张图片供参考

*{
框大小：边框框；
}
身体{
身高：100%；
保证金：0；
线高：1.5；
}
a{
颜色：#fff；
文字装饰：无；
}
.项目{
显示：网格；
网格间距：0.7雷姆；
网格模板列：重复（3，1fr）；
}
.img项目{
宽度：100%；
边框：3px#fff实心；
}
.img项目：悬停{
不透明度：0.5；
}
.信息栏{
游标：默认值；
字体大小：0.9rem；
字体重量：较轻；
填充：10px；
文本对齐：左对齐；
宽度：100%；
身高：30%；
位置：绝对位置；
底部-30%；
转换：.3s易进易出；
背景#413a44；
}
.infobar p{
不透明度：0；
保证金：0；
转换：.6s易进易出；
}
.item:hover.infobar{
底部：0%；
}
.视图栏：悬停p{
不透明度：1；
}
.viewBar img{
位置：绝对位置；
左：0；
底部：0%；
转换：.32s易入易出；
}
.视图栏：悬停img{
底部：30%；
}
.项目：悬停{
变换：比例（1.01）；
过滤器：灰度（0.6）；
}
@媒体屏幕和屏幕（最小宽度：1171px）{
.项目{
网格模板列：重复（4，1fr）；
}
}
@媒体屏幕和（最小宽度：769px）和（最大宽度：1170px）{
.项目{
网格模板列：重复（3，1fr）；
}
}

我的同僚们都是精英。

我的同僚们都是精英。

我的同僚们都是精英。

问题在于img和.infobar上的

位置：绝对

，通过应用

位置：相对

动画可以正确执行：

.viewBar img {
  position: relative; ##########
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative; ###########
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

---

希望这有帮助

您的

位置

和

边距底部

是导致问题的原因

更新

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative;
  transition: .3s ease-in-out;
  background: #413a44;
}

.viewBar img {
  position: relative;
  left: 0;
  bottom: 0;
  transition: .32s ease-in-out;
}

除去

.viewBar:hover img {
  bottom: 30%;
}

已更新

将

.item

位置设置为

相对

.item{
    position: relative;
}

然后将
.infobar
定位到
绝对值
。我还更改了
高度
页边距底部
填充
，以达到您想要的效果

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  text-align: left;
  width: 100%;
  /* updates */  
  height: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  /* end updates */  
  transition: .3s ease-in-out all;
  background: #413a44;
}

然后打开
。项目：悬停

.item:hover .infobar {
  height: 30%;
} 

将
p
上的
转换持续时间更改为
.3s
与
.infobar
相同，以获得更平滑的效果

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .3s ease-in-out;
}

希望这有帮助

这里的笔
我认为您的问题是，一旦您将鼠标悬停在项目上，图像就会被推上，而您没有将项目悬停。这意味着图像被向下推，导致再次悬停，图像被向上推。@DylanScript感谢您的解决方案，但它无法正常工作。将鼠标悬停在项目上方图像被向上推@crazychukz感谢…解决方案，但它不符合悬停的要求信息栏应显示在图像上方，但图像和信息栏在悬停时被向上推，信息栏必须隐藏，直到未执行悬停或鼠标悬停操作。附加图像above@Sid我刚刚更新了答案，希望这就是你想要达到的效果。