css实现电影卡片悬浮文字介绍效果代码-html代码-BFW代码库

代码语言：html

所属分类：悬停

代码描述：css实现电影卡片悬浮文字介绍效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
/*=================*/
/*     Values      */
/*=================*/
:root {
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e1e7ef;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #65758b;
  --color-gray-600: #48566a;
  --color-gray-700: #344256;
  --color-gray-800: #1d283a;
  --color-gray-900: #0f1729;
  --color-gray-950: #020617;
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f3ff;
  --color-primary-200: #b8e6ff;
  --color-primary-300: #7ad5ff;
  --color-primary-400: #33c2ff;
  --color-primary-500: #00a7f5;
  --color-primary-600: #0085c7;
  --color-primary-700: #006aa3;
  --color-primary-800: #005a8a;
  --color-primary-900: #004e7a;
  --color-primary-950: #003152;
  --color-danger-50: #fff0f0;
  --color-danger-100: #ffe0e0;
  --color-danger-200: #ffc7c7;
  --color-danger-300: #ffa3a3;
  --color-danger-400: #ff6b6b;
  --color-danger-500: #f53d3d;
  --color-danger-600: #f31212;
  --color-danger-700: #d60000;
  --color-danger-800: #b30000;
  --color-danger-900: #9e0000;
  --color-danger-950: #4d0000;
  --color-success-50: #f0fff4;
  --color-success-100: #dbffe8;
  --color-success-200: #b3ffcd;
  --color-success-300: #75ffa8;
  --color-success-400: #34f47a;
  --color-success-500: #0bda57;
  --color-success-600: #00b843;
  --color-success-700: #009436;
  --color-success-800: #007a2f;
  --color-success-900: #006629;
  --color-success-950: #003315;
  --color-gold-50: #fffde6;
  --color-gold-100: #fffac2;
  --color-gold-200: #fff18a;
  --color-gold-300: #ffe047;
  --color-gold-400: #ffcf0f;
  --color-gold-500: #f0b400;
  --color-gold-600: #cc8b00;
  --color-gold-700: #a86200;
  --color-gold-800: #944f00;
  --color-gold-900: #853e00;
  --color-gold-950: #471f00;
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 20px;
  --spacing-06: 24px;
  --spacing-07: 28px;
  --spacing-08: 32px;
  --spacing-09: 40px;
}

/*=========================*/
/*      Sass Functions     */
/*=========================*/
/*=================*/
/*      Theme      */
/*=================*/
:root {
  color-scheme: light dark;
  --font-color-default: var(--color-gray-700);
  --font-color-strong: var(--color-gray-900);
  --font-color-light: var(--color-gray-400);
  --background-page: var(--color-gray-50);
  --border-light: 1px solid var(--font-color-light);
  --border-strong: 2px solid var(--font-color-strong);
  --border-radius-sm: var(--spacing-01);
  --border-radius-md: var(--spacing-02);
  --border-radius-lg: var(--spacing-03);
  --shadow-color-hsl: 222 47% 11%;
  --shadow-opacity: 0.15;
  --shadow-color: hsl(var(--shadow-color-hsl) / var(--shadow-opacity));
  --shadow-sm: 0px 4px 6px var(--shadow-color);
  --shadow-md: 0px 8px 12px var(--shadow-color), 0px 1px 3px var(--shadow-color);
  --shadow-lg: 0px 16px 24px var(--shadow-color),
    0px 2px 6px var(--shadow-color);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --font-color-default: var(--color-gray-200);
    --font-color-strong: var(--color-gray-50);
    --font-color-light: var(--color-gray-500);
    --background-page: var(--color-gray-900);
    --shadow-color-hsl: 0 0% 0%;
    --shadow-opacity: 0.8;
  }
}
/*=======================*/
/*      Global Style     */
/*=======================*/
html,
body {
  height: 100%;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: grid;
  place-items: center;
  font-family: "Rubik", sans-serif;
  font-size: 170%;
  background: var(--background-page);
  color: var(--font-color-default);
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  color: var(--font-color-strong);
}

h1 {
  font-size: 3rem;
  margin-block: 2em 0.5em;
}

h2 {
  font-size: 2rem;
  margin-block: 1.5em 0.25em;
}

h3 {
  margin-block: 1.5em 0.25em;
}

section {
  width: min(80vmin, 800px);
}

/* Global CSS and Sass mixins defined in codepen.io/jsulpis/pen/ExdxLgM */
.movie-card {
  --transition-duration: 700ms;
  color: white;
  position: relative;
  border-radius: 0.6em;
  overflow: hidden;
  font-size: 120%;
  height: min(21em, 90vh);
  max-width: 90vw;
  aspect-ratio: 16/9;
  box-shadow: var(--shadow-lg), var(--shadow-lg), var(--shadow-lg);
  transition: transform var(--transition-duration);
}
.movie-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% -150%, transparent 60%, rgba(0, 0, 0, 0.5));
  transition: box-shadow var(--transition-duration);
  mix-blend-mode: overlay;
}

img {
  height: 100%;
  width: 100%;
  transition: transform var(--transition-duration);
  object-fit: cover;
  object-position: center;
}

.content {
  z-index: 1;
  position: absolute;
  bottom: min(2.5em, 6vmin);
  left: min(3em, 8vmin);
  right: min(3em, 8vmin);
  text-align: left;
  transition: transform var(--transition-duration) var(--ease-in-out);
}
.content > * {
  position: relative;
  will-change: transform;
}

h1 {
  font-size: 1.8em;
  color: inherit;
  margin: 0;
}

.infos {
  font-size: 0.8em;
  font-weight: bold;
  color: #eee;
.........完整代码请登录后点击上方下载按钮下载查看