css+div布局实现电影海报图片悬浮弹出详细信息介绍效果代码
代码语言:html
所属分类:悬停
代码描述:css+div布局实现电影海报图片悬浮弹出详细信息介绍效果代码
代码标签: css div 电影 海报 图片 悬浮 弹出 详细 信息 介绍
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/hint.2.7.0.css"> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');* { margin: 0; padding: 0; box-sizing: border-box; font-family: Inter,sans-serif } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f5 } .wrapper { position: relative; width: 100%; height: 100%; padding: 20px; display: flex; align-content: center; justify-content: center; gap: 24px; flex-wrap: wrap } .card { position: relative; width: 325px; height: 450px; background: #000; border-radius: 18px; overflow: hidden; box-shadow: 0 5px 10px rgba(0,0,0,.2) } .poster { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .poster::before { content: ''; position: absolute; bottom: -45%; left: 0; width: 100%; height: 100%; z-index: 1; transition: .3s } .card:hover .poster::before { bottom: 0 } .poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s } .card:hover .poster img { transform: scale(1.1) } .details { position: absolute; bottom: -100%; left: 0; width: 100%; height: auto; padding: 1.5em 1.5em 2em; background: #000a; backdrop-filter: blur(16px) saturate(120%); transition: .3s; color: #fff; z-index: 2 } .card:hover .details { bottom: 0 } .details h1,.details h2 { font-weight: 700 } .details h1 { font-size: 1.5em; margin-bottom: 5px } .details h2 { font-weight: 400; font-size: 1em; margin-bottom: 10px; opacity: .6 } .details .rating { position: relative; margin-bottom: 15px; display: flex; gap: .25em } .details .rating i { color: #e3c414 } .details .rating span { margin-left: .25em } .details .tags { display: flex; gap: .375em; margin-bottom: .875em; font-size: .85em } .details .tags span { padding: .35rem .65rem; color: #fff; border: 1.5px solid rgba(255 255 255 / .4); border-radius: 4px; border-radius: 50px } .details .desc { color: #fff; opacity: .8; line-height: 1.5; margin-bottom: 1em } .details .cast h3 { margin-bottom: .5em } .details .cast ul { position: relative; display: flex; flex-wrap: wrap; gap: .625rem; width: 100% } .details .cast ul li { list-style: none; width: 55px; height: 55px; border-radius: 50%; overflow: hidden; border: 1.5px solid #fff } .details .cast ul li img { width: 100%; height: 100% } </style> </head> <body> <div class="wrapper"> <div class="card"> <div class="poster"><img src="//repo.bfw.wiki/bfwrepo/image/5fc1aecf36d5a.png" alt="Location Unknown"></div> <div class="details"> <h1>Location Unknown</h1> <h2>2021 • PG • 1hr 38min</h2> <div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i><span>4.2/5</span></div> <div class="tags"><span class="tag">Italian</span><span class="tag">Drama</span><span class="tag">Indie</span></div> <p class="desc">Marco,a disillusioned backpacker in his late 20s,embarks on a solitary journey in search for meaning. </p> <div class="cast"> <h3>Cast</h3> <ul> <li><img src="/.........完整代码请登录后点击上方下载按钮下载查看
网友评论0