css ｜ ホバーアクションサンプルコード

ホバーアクションサンプルコード

  • hover-sample

    ホバーすると下線が左から右へ流れる装飾です

    注意：transitionはtransformを指定→ transition: transform .4s;

    hover-sample

    transform-origin: のleft topとright topを逆にすると ホバーすると下線が右から左へ流れる装飾です

    HTML

                    <p class="hov-l-r">hover-sample</p>

    css

                    .hov-l-r {
  display: inline-block;
  position: relative;
}
.hov-l-r::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4d6599;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .4s;
}
.hov-l-r:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}

  • hover-sample

    上のコードのtransform-originの指示をなくすとセンターから広がる装飾になります

    hover-sample

    上のコードのheightを100%にしてz-indexを調節すると文字全体にbackground-colorが広がる装飾になります

    HTML

                    <p class="hov-center">hover-sample</p>

    css

                    .hov-center {
  display: inline-block;
  position: relative;
}
.hov-center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4d6599;
  transform: scale(0, 1);
  transition: .4s;
}
.hov-center:hover::after {
  transform: scale(1, 1);
}

  • hover-sample

    ホバーすると下線が下に下がる装飾です

    HTML

                    <p class="hov-down">hover-sample</p>

    css

                    .hov-down {
  display: inline-block;
  position: relative;
}
.hov-down::after {
  position: absolute;
  bottom: 10px;
  left: 0;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #4d6599;
  opacity: 0;
  transition: .4s;
}
.hov-down:hover::after {
  bottom: -5px;
  opacity: 1;
}

  • hover-sample

    ホバーすると中心からやわらかく、四角の中で円状に広がる装飾です

    注意：疑似要素にmargin: auto;を忘れないように

    hover-sample

    上のコードの width: 240px;→　width: 200px; height: 48px;→　hight: 200px; にし、border-radius: 50%;を追加するとホバーすると中心からやわらかく円状に広がる装飾です

    HTML

                    <p class="hov-circle"><span>hover-sample</span></p>

    css

                    .hov-circle {
  position: relative;
  width: 240px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid #4d6599;
}
.hov-circle span {
  color: #333;
  z-index: 5;
  transition: 0.6s;
}
.hov-circle:hover span {
  color: #fff;
}
.hov-circle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  margin: auto;
  width: 60px;
  height: 60px;
  background: #4d6599;
  transform: scale(0);
  transition: 0.6s;
}
.hov-circle:hover::after {
  transform: scale(5);
}

  • hover-sample

    ホバーすると四角に広がる装飾です

    HTML

                    <p class="hov-sq"><span>hover-sample</span></p>

    css

                    .hov-sq {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
}
.hov-sq:hover:before,
.hov-sq:hover::after {
  width: 100%;
}
.hov-sq:hover span:before,
.hov-sq:hover span::after {
  height: 100%;
}
.hov-sq::before {
  background-color: #4d6599;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 3px;
  width: 0;
  transition: .4s;
}
.hov-sq::after {
  background-color: #4d6599;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  transition: .4s;
}
.hov-sq span::before {
  background-color: #4d6599;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 0;
  width: 3px;
  transition: .4s;
}
.hov-sq span::after {
  background-color: #4d6599;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 3px;
  transition: .4s;
}

  • hover-sample

    ホバーすると、文字が1つずつアニメーションする装飾です

    HTML

                    <p class="textAnimation">hover-sample</p>

    css

                    .textAnimation {
  font-size: 30px;
  display: block;
  letter-spacing: 0.05em;
  transition: .6s;
}
.textAnimation span {
  display: inline-block;
}
.textAnimation:hover > span:nth-last-of-type(odd) > span {
  animation: showTextBottom01 ease-out 1s backwards;
}
.textAnimation:hover > span:nth-last-of-type(even) > span {
  animation: showTextBottom02 ease-out 1s backwards;
}

@keyframes showTextBottom01 {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes showTextBottom02 {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}

    js

                    const animationTagetElements = document.querySelectorAll(".textAnimation");
for (let i = 0; i < animationTagetElements.length; i++) {
  const tagetElement = animationTagetElements[i],
  texts = tagetElement.textContent,
  textsArray = [];
  tagetElement.textContent = "";

  for (let j = 0; j < texts.split("").length; j++) {
    const t = texts.split("")[j];
    if (t === "") {
        textsArray.push(" ");
    } else {
    textsArray.push('<span><span> style="animation-delay: ' + (j * 0.1) + 's;">' + t + '</span></span>')
    }
  }
  for (let k = 0; k < textsArray.length; k++) {
      tagetElement.innerHTML += textsArray[k];
  }
}

  • hover-sample

    ホバーすると、文字が1つずつアニメーションして、背景色も左から右へスライドしてくる装飾です

    HTML

                    <p class="textAnimation-02">hover-sample</p>

    css

                    .textAnimation-02 {
  position: relative;
  font-size: 30px;
  display: block;
  letter-spacing: 0.1em;
  padding: 0.5rem 2rem;
  color: #fff;
  transition: .6s;
  background-color: #4d6599;
  text-align: center;
  z-index: 0;
}
.textAnimation-02::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3f537e;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 2s;
  z-index: -1;
}
.textAnimation-02:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
}
.textAnimation-02 span {
  display: inline-block;
  transition: .6s;
}
.textAnimation-02:hover > span > span {
  animation: showTextDeg ease-out 1s backwards;
  z-index: 5;
}
@keyframes showTextDeg {
  0% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(0);
  }
}

    js

                    const animationTagetElements02 = document.querySelectorAll(".textAnimation-02");
for (let i = 0; i < animationTagetElements02.length; i++) {
  const tagetElement02 = animationTagetElements02[i],
  texts02 = tagetElement02.textContent,
  textsArray = [];
  tagetElement02.textContent = "";

  for (let j = 0; j < texts02.split("").length; j++) {
    const t = texts02.split("")[j];
    if (t === "") {
        textsArray.push(" ");
    } else {
    textsArray.push('<span><span style="animation-delay: ' + (j * 0.1) + 's;">' + t + '</span></span>')
    }
  }
  for (let k = 0; k < textsArray.length; k++) {
      tagetElement02.innerHTML += textsArray[k];
  }
}

  • ホバーすると画像がカラーを保ったまま黒っぽくなって決められた範囲内で拡大する装飾です

    HTML

                    <p class="hov-pic-dark"><img src="img/page-img/01.jpg" alt=""></p>

    css

                    .hov-pic-dark {
  width: 100%;
  overflow: hidden;
  background-color: #000;
}
.hov-pic-dark img {
  max-width: 100%;
  transition: .6s;
}
.hov-pic-dark:hover img {
  transform: scale(1.05);
  opacity: 0.6;
}

  • ホバーすると画像が上に上がり、影がつく装飾です

    HTML

                    <p class="hov-pic-up"><img src="img/page-img/01.jpg" alt=""></p>

    css

                    .hov-pic-up {
  width: 100%;
}
.hov-pic-up img {
  max-width: 100%;
  transition: .6s;
}
.hov-pic-up:hover img {
  transform: translateY(-10px);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

  • ホバーすると画像がぼやけながら決められた範囲内で拡大する装飾です

    HTML

                    <p class="hov-pic-01"><img src="img/page-img/01.jpg" alt=""></p>

    css

                    .hov-pic-01 {
  width: 220px;
  height: 220px;
  overflow: hidden;
}
.hov-pic-01 img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  transition: .4s;
}
.hov-pic-01:hover img {
  transform: scale(1.2);
  filter: blur(2px);
}

  • TEXTTEXT

    ホバーすると画像が白黒になってテキストが表示、決められた範囲内でぼかしながら拡大する装飾です

    filter: grayscale(100%) blur(2px); を filter: sepia(100%); にすると、ぼかしなしセピアになります。

    HTML

                    <p class="hov-pic-02"><img src="img/page-img/01.jpg" alt=""></p>

    css

                    .hov-pic-02 {
  width: 220px;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.hov-pic-02 img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  transition: .4s;
}
.hov-pic-02:hover img {
  transform: scale(1.2);
  filter: grayscale(100%) blur(2px);
}
.hov-pic-02:hover .text {
  opacity: 1;
}
.hov-pic-02 .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  transition: .4s;
}
TOPページへ戻る
​