純CSS實現(xiàn)鼠標(biāo)懸停圖片上升顯示描述案例
發(fā)布時間：2023-03-01 14:17:49 作者：水星記_ 
我要評論
我要評論當(dāng)我們想在圖片上面放置一些文字內(nèi)容時，發(fā)現(xiàn)不管怎么放置，要么就是圖片影響到文字的觀感，要么就是文字擋住圖片的細節(jié)，那么怎么可以既看到圖片的細節(jié)又可以看到對圖片的文字描述呢？本文給大家分享純CSS實現(xiàn)鼠標(biāo)懸停圖片上升顯示描述案例，感興趣的朋友一起看看吧
前言
當(dāng)我們想在圖片上面放置一些文字內(nèi)容時，發(fā)現(xiàn)不管怎么放置，要么就是圖片影響到文字的觀感，要么就是文字擋住圖片的細節(jié)，那么怎么可以既看到圖片的細節(jié)又可以看到對圖片的文字描述呢？下面一起來看看吧。
實現(xiàn)效果
實現(xiàn)思路
我們需要將外層的盒子設(shè)置相對定位，將其子盒子設(shè)置絕對定位，形成子絕父相，當(dāng)我們觸摸圖片時，通過 bottom 屬性搭配 transition 屬性讓其以絲滑的動畫實現(xiàn)圖片上升顯示描述的效果。
完整源碼
<template>
<div class="parentBox">
<div class="imgBox">
<img src="https://i.postimg.cc/4xxZNsL6/1677486088618.png">
</div>
<div class="contantBox">詳細內(nèi)容</div>
</div>
</template>
<style scoped>
.parentBox {
box-shadow: 2px 2px 8px -1px cornflowerblue;
width: 200px;
height: 200px;
position: relative;
cursor: pointer;
}
.imgBox {
position: absolute;
width: 100%;
height: 100%;
z-index: 20;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
bottom: 0;
}
img {
width: 100%;
height: 100%;
}
.parentBox:hover .imgBox {
bottom: 60px;
}
.contantBox {
padding: 4px;
color: white;
width: 100%;
height: 60px;
background: cornflowerblue;
position: absolute;
bottom: 0;
}
</style>
到此這篇關(guān)于純CSS實現(xiàn)鼠標(biāo)懸停圖片上升顯示描述案例的文章就介紹到這了,更多相關(guān)css鼠標(biāo)懸停圖片上升顯示描述內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS 實現(xiàn) 圖片鼠標(biāo)懸停折疊效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-21純CSS實現(xiàn)鼠標(biāo)懸停顯示圖片效果的實例分享
這里來給大家推薦一個純CSS實現(xiàn)鼠標(biāo)懸停顯示圖片效果的實例分享,以針對鼠標(biāo)移到tr標(biāo)簽上來添加hover這種最簡單的方式來演示,簡單明了,需要的朋友可以參考下2016-06-06
