【问题标题】：Netflix-like hover effect with buttons [closed]带有按钮的类似 Netflix 的悬停效果 [关闭]
【发布时间】：2020-12-08 07:17:12
【问题描述】：

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

到目前为止我已经这样做了：

.Row_poster:hover { 
   transform: scale(1.3);
   overflow: visible;
   cursor: pointer;
   z-index: 98;
}

【问题讨论】：

显示您尝试过的代码。
您应该使用“更新”标题下的代码更新您的问题，并在 cmets 中通知已进行更新。更容易理解您的整体问题。
如果您需要在鼠标悬停时显示按钮，那么您只需在默认情况下使这些按钮不可见，当您找到鼠标光标时，使这些按钮可见。一个肤浅的例子是.button {display: none}和selector:hover .button {display: block}

标签： javascript html css reactjs

【解决方案1】：

嗨，严酷，

请看下面我整理的代码，看看这是否是您想要实现的目标，伙计。

$(document).ready(function () {
                $(document).on('mouseenter', '.transformar', function () {
                    $(this).find(".playButtons").show('slow');
                }).on('mouseleave', '.transformar', function () {
                    $(this).find(".playButtons").hide();
                });
            });

.transformar {
display:block;
height:150px;
transition: transform 2s;
}

.playButtons{display: none}

.transformar:hover{
transform: scale(2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='transformar' align="center">

<img src="https://i.pinimg.com/originals/e1/d0/1b/e1d01b1b7f602d223afc747fcbced364.jpg" height="150" alt="Netflix Example">
<h2>Filme do Netflix</h2>
<div id="#botones" class="playButtons">
<button type="button">PLAY EPISODE</button>
</div>
</div>

【讨论】：

扩大规模不是问题。我希望悬停后显示灰色部分（所有按钮和文本）。
请重试代码，Harsh，我在阅读了您评论的详细信息后做了一个小调整。请点击整页链接查看效果。干杯！
我没有确切地知道发生了什么我对 Stack O 有点陌生，但是我所做的只是帮助另一个人，就像我在需要答案时希望得到帮助一样，请吉特引导我解决这个问题，找到一个公正的解决方案。谢谢！

【解决方案2】：

纯 CSS 方法

虽然使用JavaScript可以得到效果，但是这里有一些纯CSS的方法。

方法一：使用`::after`和`::before`。

阅读：

::after MDN 上
::before MDN 上

body,
html {
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}

.square {
  background-size: cover!important;
  background-position: center!important;
  display: inline-block;
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square:hover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
  border-radius: 10px 10px 0 0;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square::after {
  position: relative;
  top: 100px;
  display: block;
  background: #18181818;
  box-shadow: 0 0 2px #000a;
  color: #fff;
  width: 150px;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  opacity: 0;
  border-radius: 0 0 10px 10px;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
}

.square:hover::after {
  opacity: 1;
}

.square.one {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one::after {
  content: 'Never Gonna Give You Up!';
}

&lt;div class="square one"&gt;&lt;/div&gt;

如果您的字幕内容不是很定制，您应该更喜欢使用此方法。

方法2：使用单独的`elements`

无论您的字幕内容如何定制，这种方法都是最好的。

body,
html {
  height: 100%;
  width: 100%;
  background: #111;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: Lato, 'Segoe UI', Roboto, sans-serif;
}

.square {
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square .cover {
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;
}

.square .text {
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;
}

.square:hover {
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square:hover .text {
  display: block;
}

.square.one .cover {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover .cover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

<div class="square one">
  <div class="cover"></div>
  <div class="text">
    Never Gonna Give You Up!
  </div>
</div>

结果

使用方法2。这看起来和gif很相似。

body,
html {
  height: 100%;
  width: 100%;
  background: #141414;
  margin: 0;
  padding: 25px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.square {
  width: 150px;
  height: 100px;
  transition: transform 100ms ease-out, border-radius 200ms ease-out;
}

.square .cover {
  width: 100%;
  height: 100px;
  border-radius: 10px 10px 0 0;
  background-size: cover!important;
  background-position: center!important;
}

.square .text {
  display: none;
  background: #181818;
  color: #fff;
  width: 100%;
  height: fit-content;
  padding: 5px;
  box-sizing: border-box;
  transition: opacity 300ms ease-out, border-radius 200ms ease-out;
  border-radius: 0 0 10px 10px;
}

.square:hover {
  border-radius: 10px;
  transform: scale(1.5);
  box-shadow: 0 0 2px #000a;
}

.square:hover .text {
  display: block;
}

.square.one .cover {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square.one:hover .cover {
  background: url(https://media.giphy.com/media/lgcUUCXgC8mEo/giphy.gif), url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg/320px-Arrestbygningen_ved_r%C3%A5d-_og_domhuset.jpg), skyblue;
}

.square .text .info {
  font-size: 8px;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icons :nth-child(3) {
  margin-left: auto;
}

.icons span{
  border-radius: 50%;
  border: 1px solid #777;
  width: 18px;
  height: 18px;
  margin-right: 2px;
  
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  font-weight: 1000;
  overflow: hidden;
}

.rating {
  border: 0.1px solid white;
  padding: 1px 2px;
  
}
.match {
  color: green;
  font-weight: bold;
}

<div class="square one">
  <div class="cover"></div>
  <div class="text">
    <div class="icons">
      <span>:)</span>
      <span>O</span>
      <span>V</span>
    </div>
    <div class="info">
      <span class="match">98% Match</span>
      <span class="rating">18+</span>
      <span class="seasons">5 Seasons</span>
    </div>
  </div>
</div>

【讨论】：

纯 CSS 方法

方法一：使用::after和::before。

方法2：使用单独的elements

结果

方法一：使用`::after`和`::before`。

方法2：使用单独的`elements`