如何在悬停时制作 Pop-Up 标题卡？

Question

所以对于我的网站，我有一个投资组合页面，我想为我的 Google 文档或 Word 文档设计一个简单的图像缩略图到 link 文章和东西。 PDF、幻灯片等也是如此

我想要显示徽标或字母，当你将鼠标悬停在上面时，我想要一张标题卡片 "pop" 向上弹起一点，然后当你悬停时，我想要这张卡片向下滑动并消失。

理论上，这就是我想要的样子：

不管它是先向上滑动然后向下滑动，还是向上弹起，像碰到正方形底部一样弹起，然后掉下来，都没有关系 - 我只是想知道如何做到这一点。

Answer 1

有很多不同的方法可以做到这一点。

这是 CSS 唯一的方法。

基本上，您可以为每张想要悬停 pop-up 标题的标题卡创建不同的 class 名称。我为悬停弹出窗口中的内容使用了伪选择器。

希望对您有所帮助！

.title-card {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 5px;
  background: #e8e8e8;
  border: 1px solid #fff;
  box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
  border-radius: 6px;
  color: black;
  padding: 10px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  font-family: Arial, sans-serif;
}

.title-card::before {
  position: absolute;
  display: inline-block;
  left: 0;
  width: 100%;
  height: 50%;
  padding: 10px;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%); 
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(200%);
  transition: all 500ms ease;
}

.title-card:hover::before {
  opacity: 1;
  transform: translateY(100%);
}

.title-card.caption-a::before {
  content: "Hello from the other side!";
}

.title-card.caption-b::before {
  content: "It's tricky!";
}

.title-card.caption-c::before {
  content: "Don't call it a comeback!";
}

.title-card.logo-a {
 background-image: url(https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/so/so-icon.png?v=c78bd457575a);
}

.title-card.logo-b {
 background-image: url(https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/se/se-icon.png?v=93426798a1d4);
}

.title-card.logo-c {
 background-image: url(https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}

.title-card.logo-d {
 background-image: url(https://cdn.sstatic.net/Sites/Whosebug/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}

<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>

如何在悬停时制作 Pop-Up 标题卡？

How to Make Pop-Up Title Card on Hover?

html

javascript

css

html-table

thumbnails