一个简单的css样式

最近要做一个网站,大概就是一个小游戏的网站,要做一个游戏列表,这个样式我自己感觉我写的太丑了,
也搭配不出好看的颜色,背景图片也怪怪的,大概要求是这样的

img

上面 三个X 是这个游戏的标题,下面红色阴影是游戏简介,
当鼠标在img图片上时,显示这个简介(也可以没有这个)
img是游戏图片
大概布局是这样

img

这个应该怎么写,让页面美观整洁?可以私信我

flex 布局 整点动画吧 会好些 ,如果是游戏类的话 可以参考下4399那种

你这要的是设计稿....不是css...我感觉


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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      display: flex;
      width: 100%;
      /* height: 400px; */
      justify-content: space-around;
      background: blue;
      flex-wrap: wrap;
    }

    .box>.list-item {
      width: 32%;
      height: 100%;
      background: white;
      margin: 20px 0;
    }

    .list-item img {
      width: 100%;
      height: 200px;
      margin: 30px auto;
      display: block;
    }

    .list-item .title {
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
    <div class="list-item">
      <p class="title">王者荣耀</p>
      <div class="gameBox">
        <p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1] 
          王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
        </p>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
      </div>
    </div>
  </div>
</body>
<script>
 

</script>

</html>

用flex布局 。样式自己可以调