HTML/CSS

【コピペOK】CSSだけでマウスホバーするとフワッと表示

投稿日:

はじめまして、ヤマブキといいます。

このブログでは私自身がプログラミング、Web関係、生活していて経験した悩んだことを同じように悩んでいる人の手助けになるような情報を発信していきます。

作成するhover アニメーション

はじめに

HTML

<body>
  <div class="contents">
    <div class="wrapper">
      <img src="" alt="">
      <div class="cover">
        <p>テキスト</p>
      </div>
    </div>

    <div class="wrapper">
      <img src="" alt="">
      <div class="cover">
        <p>テキスト</p>
      </div>
    </div>

    <div class="wrapper">
      <img src="" alt="">
      <div class="cover">
        <p>テキスト</p>
      </div>
    </div>

    <div class="wrapper">
      <img src="" alt="">
      <div class="cover">
        <p>テキスト</p>
      </div>
    </div>
  </div>
</body>

CSS

body{
  margin: 0;
  background-color: pink;
}
.contents{
  justify-content: space-between;
  display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      width: 85%;
      height: auto;
      min-width: 500px;
}
.wrapper img{
  height: 20vw;
  width: 100%;
 }
 
 .wrapper p{
   padding-top: 1vw;
   padding-left: 0;
   color: white;
   font-size: calc(10px + 2vw);
   margin: 0;
  }

まず画像の配置、画像の大きさ、文字のスタイリングをしておきます。

次に

CSS

.wrapper{
    margin: 0px;
    width:45%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 3%;
  }
.cover{
  cursor: pointer;
  width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0,0.4);
      position: absolute;
      top:0;
      left: 0;
      opacity: 0;
      -webkit-transition:	all 0.6s ease;
      transition:all 0.6s ease;
  }

wrapperクラスをposition: relative; 、coverクラスにposition: absolute;top:0;left: 0; としてwrapperクラスにcoverクラスを重ねるようにし、opacity:0;で非表示にしておきます。

最後に

CSS

.cover:hover{
  opacity: 1;
  padding-left: 15%;
}

マウスホバーをしたらopacity:1;で表示させて左にpaddingが15%つきます、これで文字が右に15%動きます。

padding-topにしたりつける値を変えることで文字の動きが変わります。

オススメしている本

他の投稿

-HTML/CSS

Copyright© yamab-log , 2021 All Rights Reserved Powered by STINGER.