div+css实现卡片电影海报悬浮显示更多信息效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现卡片电影海报悬浮显示更多信息效果代码,显示了电影名称及上映年份、主演、评分标签介绍等信息。
代码标签: div css 卡片 电影 海报 悬浮 显示 更多 信息
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <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"> <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: 0.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 / 0.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: 0.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/5fc1ae951e91a.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 lat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0