Javascript 带有按钮的类似Netflix的悬停效果

如何创建如gif所示的悬停效果？我现在所能做的就是把它放大悬停。如何在悬停时添加按钮和其他细节

到目前为止，我已经做到了：

.Row\u海报：悬停{
转换：比例（1.3）；
溢出：可见；
光标：指针；
z指数：98；
}

你好，刺耳，

朋友，请看一下下面我编写的代码，看看这是否就是你想要实现的

$（文档）.ready（函数（）{
$（文档）.on（'mouseenter'，'.transformar'，函数（）{
$（this.find（“.playButtons”）.show（'slow'）；
}).on（'mouseleave'，'.transformar'，函数（）{
$（this.find（“.playButtons”）.hide（）；
});
});
.transformar{
显示：块；
高度：150像素；
转变：转变2s；
}
.playButtons{显示：无}
.transformar:悬停{
变换：尺度（2）；
}

网飞电影公司
剧集
纯CSS方法
虽然可以使用JavaScript获得效果，但这里有一些纯CSS方法

方法1：使用
：：在
之后和
：：在
之前。
阅读：


关于MDN
关于MDN


body，
html{
身高：100%；
宽度：100%；
背景：#141414；
保证金：0；
填充：25px；
框大小：边框框；
字体系列：Lato，'SegoeUI'，Roboto，无衬线；
}
.广场{
背景尺寸：封面！重要；
背景位置：中心！重要；
显示：内联块；
宽度：150px；
高度：100px；
过渡：变换100ms缓和，边界半径200ms缓和；
}
.square:悬停{
背景：url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif)，网址(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_天蓝色；
边界半径：10px 10px 0；
转换：比例（1.5）；
盒影：0 0 2px#000a；
}
.square：：之后{
位置：相对位置；
顶部：100px；
显示：块；
背景：1818；
盒影：0 0 2px#000a；
颜色：#fff；
宽度：150px；
高度：适合的内容；
填充物：5px；
框大小：边框框；
不透明度：0；
边界半径：0 10px 10px；
过渡：不透明度300ms缓和，边界半径200ms缓和；
}
.square:悬停：：之后{
不透明度：1；
}
.广场1号{
背景：url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_天蓝色；
}
一：悬停{
背景：url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif)，网址(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_天蓝色；
}
1.方{
内容：“永远不会放弃你！”；
}
显示您尝试过的代码。您应该在“更新”标题下使用代码更新您的问题，并在注释中通知已进行更新。使整个问题更容易理解。如果需要在鼠标上方显示按钮，则默认情况下只需将这些按钮设置为不可见，当找到鼠标光标时，即可将按钮设置为可见。一个肤浅的例子是
.button{display:none}
和
选择器：hover.button{display:block}
放大它并不是问题。我想灰色的部分（所有的按钮和文本）显示一次悬停。请再试一次代码，苛刻，我做了一个小的调整后，阅读您的评论细节。请点击完整页面链接查看效果。干杯我没有确切地了解发生了什么，我对Stack O有点陌生，但我所做的只是帮助另一个人，就像我希望在我需要答案时得到帮助一样，Jeet请引导我进入这件事，找到一个公正的解决方案。谢谢