@matrixage/picpic/src/components/ImgItems/index.less

A awesome image bed by github pages and github actions.

.img_items {
      width: 80vw;
      padding: 12vh 0;

      &.list {
            flex-direction: column;

            .img_item_wrap {
                  width: 100%;
                  margin-bottom: 24px;
                  border-radius: 18px;
                  overflow: hidden;

                  &:hover,
                  &.mobile {
                        .img_item {
                              transform: scale(1.08);
                        }

                        .options {
                              transform: translateY(100%);
                        }
                  }

                  .img_item {
                        height: 27vh;
                  }

                  .detail_info {
                        display: flex;
                        top: 0;
                        left: 0;
                        width: 300px;
                        height: 100%;
                        padding: 15px;
                        border-radius: 4px;
                        background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.6));
                        backdrop-filter: blur(15px);
                        -webkit-backdrop-filter: blur(15px);
                        color: white;
                        cursor: pointer;
                        border-radius: 18px;

                        .name {
                              font-size: 36px;
                              font-weight: bold;
                        }

                        .detail {
                              .detail_item {
                                    font-size: 15px;
                                    margin-bottom: 9px;

                                    &:last-child {
                                          margin-bottom: 0;
                                    }

                                    .title {
                                          width: 64px;
                                    }
                              }
                        }
                  }
            }
      }

      .img_item_wrap {
            width: var(--size_img);
            height: auto;
            box-sizing: border-box;
            overflow: hidden;
            transition: all ease 0.3s;
            background: linear-gradient(-30deg, black, whitesmoke);

            &:hover,
            &.mobile {
                  .options {
                        transform: translateY(0);
                  }
            }

            .img_item {
                  width: 100%;
                  height: var(--size_img);
                  box-sizing: border-box;
                  overflow: hidden;
                  cursor: pointer;
                  transition: all ease 0.3s;
            }

            .options {
                  width: 100%;
                  height: 36px;
                  white-space: pre-wrap;
                  font-size: 10px;
                  overflow: hidden;
                  cursor: pointer;
                  background-color: rgba(0, 0, 0, 0.45);
                  backdrop-filter: blur(3px);
                  -webkit-backdrop-filter: blur(3px);
                  color: white;
                  transition: all ease 0.3s;
                  transform: translateY(100%);
            }

            .detail_info {
                  display: none;
            }
      }
}