/* 导入字体 */
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

/* 使用border-box方式计算元素大小，便于控制元素大小 */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Muli', sans-serif;
    background-color: rgb(236, 236, 236);
    height: 95vh;       /* 关于单位vh，自行百度 */
}

#title {
    text-align: center;
    padding-top: 5vh;
}

.container {
    display: flex;      /* 弹性容器，影响子元素排列 */
    width: 80%;
    height: 80%;
    /* 常用方法，使元素居中 */
    margin-left: auto;
    margin-right: auto;
}

/* 缩略卡片 */
.card {
    /* 图片 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 10vh;
    height: 90%;
    color: #fff;        /* 字体颜色 */
    flex: 1;            /* 占一份空间 */
    margin: 10px;       /* 不指定方向，设置四个方向 */
    cursor: pointer;
    position: relative; /* 本例中对card没影响，实际上是为了提供给h3用于定位 */
    transition: all 1s ease-in-out;
}

/* 展开卡片 */
.card.active {
    flex: 5;            /* 展开后占五份空间 */
}

.card h3 {
    opacity: 0;
    font-size: 30px;
    position: absolute; /* 寻找第一个position非static的父元素为基点进行定位 */

    /* position: absolute时用于调整位置 */
    bottom: 0vh;
    left: 3vw;

    transition: opacity 0.3s ease-in;
}

.card.active h3{
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

/* 展开大图的超链接，div本身就有监听事件
   需要加一层看不见的图片实现二次点击   */
.card img {
    opacity: 0;
    display: none;      /* 默认关闭，没有点击事件 */
    height: 100%;
    width: 100%;
}

.card.active img {
    display: inline;    /* 可以点击 */
}