在悬停时弄一个弹出式标题卡?
问题说明
因此,对于我的网站,我有一个投资组合页面,我想为我的Google文档或Word文档设计一个简单的图像缩略图以链接文章和内容. PDF,幻灯片等也一样.
So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
我希望显示徽标或字母,当您将鼠标悬停在其上时,我希望标题卡弹出"并像弹起一样,然后当您悬停时,我希望该卡向下滑动并消失.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
理论上,这就是我想要的样子:
In theory, this is what I want it to look like:
它只是向上滑动然后向下滑动还是向上射击,就像弹到正方形的底部然后掉下来一样反弹,没关系-我只是想知道如何做到这一点.
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.
正确答案
有很多不同的方法可以做到这一点.
There are a ton of different ways to do this.
这是CSS唯一的方式.
Here is a CSS only way.
基本上,您将为每个要具有悬停弹出标题的标题卡创建一个不同的类名.我为悬停弹出窗口中的内容使用了伪选择器.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
.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/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhcfieaf
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20 -
希伯来语的空格句子标记化错误
it1352 06-22