2021-05-23 - Githubissues

金魚切版 002：互動圖文卡片

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div class="wrap">
        <div class="item">
             <img src="http://fakeimg.pl/500x400/00CED1/00CED1/?text=g">
         <div class="text">
           <h2>常見版型二</h2>
           <p>圖文互動卡片版型嘗試中</p>
         </div>
        </div>
      <div class="item">
         <img src="http://fakeimg.pl/500x400/00CED1/00CED1/?text=">
         <div class="text">
           <h2>常見版型二：試著滿版</h2>
           <p>圖文互動卡片版型嘗試中，有點好玩。</p>
         </div>
      </div>
      <div class="item">
         <img src="http://fakeimg.pl/500x400/00CED1/00CED1/?text=">
         <div class="text">
           <h2>常見版型二</h2>
           <p>圖文互動卡片版型嘗試中</p>
         </div>
      </div>
      <div class="item">
         <img src="http://fakeimg.pl/500x400/00CED1/00CED1/?text=">
         <div class="text">
           <h2>常見版型二</h2>
           <p>圖文互動卡片版型嘗試中</p>
         </div>
      </div>
    </div>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrap{
    width: 100%;
    display: flex;
}

.item{
    width: 25%;
    position: relative;
}

.item img{
    width: 100%;
    vertical-align: middle;
}

.item .text{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0px;
    padding: 20px;
    background-color: rgba(0, 0, 0,);
    display: flex;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.5s;
}

.item:hover .text{
    opacity: 1;
}

.item h2{
    font-size: 40px;
    color: #000;
    font-weight: 500;
}

.item h2:after{
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    margin: 10px 0;
    background-color: #000;
    transition: width 0.5s 0.5s;
}

.item:hover h2:after{
    width: 100%;
}

.item p{
    font-size: 20px;
    color: #000;
}

Lichen5221 / Report-Daily

2021-05-23 #34

金魚切版 002：互動圖文卡片