要素を隠す【overflow-hidden】

jqueryやjavascriptを使用せず、cssのみで要素を隠したり出現させたりします。

メニューとかに使えるかな。

ボタンにhoverすると隠れている3つの要素が出現します。

3番のみがアニメーションがかかった状態で隠れたり、出現したりします。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>タイトルだよ</title>
    <meta name="description" content="ディスクリプションだよ">
    <meta name="keywords" content="キーワード1, キーワード2">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="container">
        <p class="button">ボタンだよ</p>
        <div class="boxContainer">
          <div class="box">
            <div class="box01"><img src="images/test.jpg">
              <p>01</p>
            </div>
            <div class="box02"><img src="images/test.jpg">
              <p>02</p>
            </div>
          </div>
          <div class="box03"><img src="images/test.jpg">
            <p>03</p>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
    </footer>
  </body>
</html>

・div class=”box03″に当てるcssが重要です。

○index.css

.container {
  background-color: #e6e6e6;
  padding: 100px 0; }

.button {
  width: 300px;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: blue;
  border: solid 1px blue;
  margin: 0 auto 50px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s; }
  .button:hover {
    background-color: blue;
    color: #fff; }

.boxContainer {
  height: 1500px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto; }

.button:hover + .boxContainer .box01 {
  display: block; }

.box01 {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: none;
  max-width: 400px;
  margin: 0 auto 80px; }
  .box01 img {
    max-width: 100%;
    width: 100%; }

.button:hover + .boxContainer .box02 {
  display: block;
  height: auto; }

.box02 {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  overflow-y: hidden;
  height: 0;
  max-width: 400px;
  margin: 0 auto; }
  .box02 img {
    max-width: 100%;
    width: 100%; }

.button:hover + .boxContainer .box03 {
  display: block;
  height: 350px; }

.box03 {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  overflow-y: hidden;
  height: 0;
  max-width: 400px;
  margin: 0 auto; }
  .box03 img {
    max-width: 100%;
    width: 100%; }

・box01

マウスhoverによりdisplay: none;とdisplay: block;を切り替えているだけです。

要素にアニメーションは無く隠れたり、出現したりします。

・box02

overflow:hidden;を指定し、マウスhoverによりheight: 0;とheight: auto;を切り替えているだけです。

こちらも要素にアニメーションは無く隠れたり、出現したりします。

・box03

overflow:hidden;を指定し、マウスhoverによりheight: 0;とheight: 350px(任意の高さ);を切り替えているだけです。

こちらの場合にのみ要素にアニメーション付きで隠れたり、出現したりします。

高さを指定しないとアニメーションが動きませんので、使いどころには注意が必要です。

今回は以上です。