Video presentation address: mp.weixin.qq.com/s/t4lFX5ImG…

index.html

<! DOCTYPE html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="./style.css" rel="stylesheet"> <title>CSS video title hover effect </title> <link> </head> <body> <! <div class="container">
    <div class="box">
      <div class="videoBx">
        <video src="bg1.mp4" muted autoplay loop></video>
      </div>
      <div class="contentBx">
        <div class="content"</ H2 > <p> I'll wait for you at the door as the smoke rises. The sun is setting, I will wait for you at the side of the mountain. The leaves are yellow, I will wait for you under the tree. The moon is bent, I will wait for you at 15. The drizzle is coming, I will wait for you under my umbrella. Water frozen, I wait for you in the river. Life tired, I wait for you in heaven. We are old, I will wait for you in the next life. </p> </div> </div> </div> <div class="box">
      <div class="videoBx">
        <video src="bg2.mp4" muted autoplay loop></video>
      </div>
      <div class="contentBx">
        <div class="content"</ H2 > <p> I'll wait for you at the door as the smoke rises. The sun is setting, I will wait for you at the side of the mountain. The leaves are yellow, I will wait for you under the tree. The moon is bent, I will wait for you at 15. The drizzle is coming, I will wait for you under my umbrella. Water frozen, I wait for you in the river. Life tired, I wait for you in heaven. We are old, I will wait for you in the next life. </p> </div> </div> </div> </div> </body> </html>Copy the code

style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Microsoft Yahei, sans-serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
}

.container .box{
  position: relative;
  width: 450px;
  height: 320px;
  background: # 000;} .container .box .videoBx{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .container .box .videoBx video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .container .box .contentBx{ position: absolute; top:40px; bottom: 40px; right: 40px; width: 100%; display: flex; justify-content: center; align-items: center; Background: rgba (0,0,0,0.95); The transition: 0.5 s transform; transform-origin: right; Transform :scaleX(0)}.container. Box :hover. ContentBx {transition: transform 0.5s; transform-origin: left; transform:scaleX(1) } .container .box .contentBx .content{ position: relative; padding: 20px 60px; opacity: 0; } .container .box:hover .contentBx .content{ opacity: 1; The transition: 0.5 s; The transition - delay: 0.5 s; } .container .box .contentBx .content h2{ color:#fff;
  font-weight: 500;
  margin-bottom: 10px;
}

.container .box .contentBx .content p{
  color: #fff;
  font-weight: 300;
}
Copy the code