今天要分享的是這個，
不過他影片中使用的方式我不是很喜歡，
他是直接寫死了物件的高度，
但如果想要做到這個效果好像怎麼樣都得寫死一個東西，
加上我發現 height 設定 auto 的話沒有辦法做出動畫，
所以最後使用了 max-height 來做出動畫，
可以參考看看我的 code，
當然如果你確定你的物件高度都會是一樣的，
也是可以高度直接寫死，
或是用 JS 來寫出這個效果。

效果

HTML

<div class="container">
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=1">
    </div>
    <div class="text">
      <h3>Title</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, velit dolores nesciunt id harum ullam aut
        deleniti autem facere excepturi, molestias eaque, architecto minima voluptatem voluptates. Laboriosam aliquam
        mollitia non obcaecati, hic quaerat ad alias eum, voluptates, esse eius atque.</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=2">
    </div>
    <div class="text">
      <h3>Title</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, velit dolores nesciunt id harum ullam aut
        deleniti autem facere excepturi, molestias eaque, architecto minima voluptatem voluptates. Laboriosam aliquam
        mollitia non obcaecati, hic quaerat ad alias eum, voluptates, esse eius atque.</p>
    </div>
  </div>
  <div class="item">
    <div class="pic">
      <img src="https://picsum.photos/300/300/?random=3">
    </div>
    <div class="text">
      <h3>Title</h3>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, velit dolores nesciunt id harum ullam aut
        deleniti autem facere excepturi, molestias eaque, architecto minima voluptatem voluptates. Laboriosam aliquam
        mollitia non obcaecati, hic quaerat ad alias eum, voluptates, esse eius atque.</p>
    </div>
  </div>
</div>

CSS

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

body {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 50px;
  background-color: #d35400;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.item {
  width: 290px;
  padding: 30px;
  margin: 15px;
  border-radius: 20px;
  margin-bottom: 30px;
  background-color: #fff;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .4);
}

.pic {
  width: 90%;
  margin: -80px auto 20px;
}

.pic img {
  width: 100%;
  vertical-align: middle;
  border-radius: 10px;
}

.item .text {
  height: auto;
  max-height: 0;
  overflow: hidden;
  transition: .5s;
}

.text h3 {
  margin-bottom: .4em;
}

.item:hover .text {
  max-height: 400px;
}

今天就先到這裡啦～
我們明天見。