如何在懸停時制作彈出標題卡？

Question

因此，對於我的網站，我有一個作品集頁面，我想為我的 Google 文檔或 Word 文檔設計一個簡單的圖像縮略圖，以鏈接論文和其他內容。 PDF、幻燈片等也是如此。

我希望顯示徽標或字母，當您將鼠標懸停在其上時，我希望標題卡“彈出”並像彈起一點一樣，然后當您將鼠標懸停時，我希望卡片向下滑動並消失。

理論上，這就是我想要的樣子：

無論它只是向上滑動然后向下滑動還是向上射擊，像撞到正方形底部一樣反彈，然后掉下來，都沒有關系 - 我只是想知道如何做到這一點。

Answer 1

有很多不同的方法可以做到這一點。

這是一個CSS唯一的方法。

基本上，您可以為每張想要帶有懸停彈出式標題的標題卡創建不同的類名。 我對懸停彈出窗口中的內容使用偽選擇器。

希望這可以幫助！

 .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>