ホバー演出のCSSコピペパーツ 22選

CRG-10-001

画像ズームホバーImage Zoom

.cg-hv-zoom {
  width: 200px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-zoom-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #C89B6C, #8A6A44);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.cg-hv-zoom:hover .cg-hv-zoom-img { transform: scale(1.12); }

<div class="cg-hv-zoom"><div class="cg-hv-zoom-img"></div></div>

GROSS WT. 401 B ORIGINAL

CRG-10-002

HOVER ME

傾きホバーTilt

.cg-hv-tilt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 40px;
  font-weight: 900;
  letter-spacing: .08em;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.3, 1.4, .6, 1), box-shadow .3s;
}
.cg-hv-tilt:hover {
  transform: rotate(-3deg) scale(1.04);
  box-shadow: 6px 6px 0 #F2B707;
}

<div class="cg-hv-tilt">HOVER ME</div>

GROSS WT. 454 B ORIGINAL

CRG-10-003

中央から伸びる下線Center Underline

.cg-hv-nav { display: flex; gap: 28px; }
.cg-hv-nav a {
  position: relative;
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1B1A17;
  text-decoration: none;
}
.cg-hv-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2.5px;
  background: #E8590C;
  transform: translateX(-50%);
  transition: width .28s ease;
}
.cg-hv-nav a:hover::after { width: 100%; }

<nav class="cg-hv-nav"><a href="#">HOME</a><a href="#">WORKS</a><a href="#">CONTACT</a></nav>

GROSS WT. 543 B ORIGINAL

CRG-10-004

円が広がるアイコンCircle Expand

.cg-hv-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  border-radius: 50%;
  overflow: hidden;
  z-index: 0;
  transition: color .25s;
}
.cg-hv-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #E8590C;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.3, 1.3, .6, 1);
  z-index: -1;
}
.cg-hv-circle:hover { color: #fff; }
.cg-hv-circle:hover::before { transform: scale(1); }

<a href="#" class="cg-hv-circle" aria-label="共有"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="m8.6 13.5 6.8 4M15.4 6.5l-6.8 4"/></svg></a>

GROSS WT. 941 B ORIGINAL

CRG-10-005

文字が入れ替わるリンクText Swap

.cg-hv-swap {
  display: inline-block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #1B1A17;
  text-decoration: none;
}
.cg-hv-swap span {
  position: relative;
  display: inline-block;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-swap span::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  color: #E8590C;
}
.cg-hv-swap:hover span { transform: translateY(-100%); }

<a href="#" class="cg-hv-swap"><span data-text="VIEW MORE">VIEW MORE</span></a>

GROSS WT. 546 B ORIGINAL

CRG-10-006

HOVER

枠線が描かれるホバーBorder Draw

.cg-hv-draw {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 46px;
  font-weight: 900;
  letter-spacing: .12em;
  cursor: pointer;
  background:
    linear-gradient(#E8590C, #E8590C) no-repeat 0 0 / 0 3px,
    linear-gradient(#E8590C, #E8590C) no-repeat 100% 0 / 3px 0,
    linear-gradient(#E8590C, #E8590C) no-repeat 100% 100% / 0 3px,
    linear-gradient(#E8590C, #E8590C) no-repeat 0 100% / 3px 0,
    #fff;
  transition: background-size .35s ease;
}
.cg-hv-draw:hover {
  background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%;
}

<div class="cg-hv-draw">HOVER</div>

GROSS WT. 634 B ORIGINAL

CRG-10-007

作品タイトル
2026 / Web Design

キャプションせり上がりCaption Rise

.cg-hv-cap {
  position: relative;
  margin: 0;
  width: 200px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-cap-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3A5A78, #1E3247);
}
.cg-hv-cap figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: rgba(27, 26, 23, .82);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cg-hv-cap figcaption small { font-weight: 400; opacity: .75; }
.cg-hv-cap:hover figcaption { transform: translateY(0); }

<figure class="cg-hv-cap"><div class="cg-hv-cap-img"></div><figcaption>作品タイトル<br><small>2026 / Web Design</small></figcaption></figure>

GROSS WT. 765 B ORIGINAL

CRG-10-008

ふわり

影がにじむホバーSoft Shadow Grow

.cg-hv-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 44px;
  font-weight: 700;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(27, 26, 23, .1);
  cursor: pointer;
  transition: box-shadow .35s ease, transform .35s ease;
}
.cg-hv-soft:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(232, 89, 12, .25);
}

<div class="cg-hv-soft">ふわり</div>

GROSS WT. 439 B ORIGINAL

CRG-10-009

他がぼやけるギャラリーFocus Blur Siblings

.cg-hv-blurset { display: flex; gap: 12px; }
.cg-hv-blurset i {
  width: 62px;
  height: 84px;
  border-radius: 10px;
  background: linear-gradient(160deg, #C89B6C, #8A6A44);
  transition: filter .3s ease, transform .3s ease;
  cursor: pointer;
}
.cg-hv-blurset i:nth-child(2) { background: linear-gradient(160deg, #E8590C, #B84508); }
.cg-hv-blurset i:nth-child(3) { background: linear-gradient(160deg, #3A5A78, #1E3247); }
.cg-hv-blurset:hover i { filter: blur(3px) grayscale(.5); }
.cg-hv-blurset i:hover {
  filter: none;
  transform: scale(1.08);
}

<div class="cg-hv-blurset"><i></i><i></i><i></i></div>

GROSS WT. 607 B ORIGINAL

CRG-10-010

スタンプ押印ホバーStamp Press

.cg-hv-stamp {
  position: relative;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  border: 2px solid #1B1A17;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
}
.cg-hv-stamp span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #B8261C;
  border: 3px double #B8261C;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  transform: scale(2.4) rotate(-14deg);
  opacity: 0;
  transition: transform .18s cubic-bezier(.4, 0, 1, 1), opacity .14s;
}
.cg-hv-stamp:hover span {
  transform: scale(1) rotate(-8deg);
  opacity: 1;
}

<button class="cg-hv-stamp" type="button">承認する<span aria-hidden="true">APPROVED</span></button>

GROSS WT. 811 B ORIGINAL

CRG-10-011

VIEW PROJECT

暗転テキスト表示Dim & Reveal

.cg-hv-dim {
  position: relative;
  width: 200px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.cg-hv-dim i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #2B8A78, #14453C);
  transition: filter .3s ease, transform .3s ease;
}
.cg-hv-dim span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}
.cg-hv-dim:hover i { filter: brightness(.45); transform: scale(1.06); }
.cg-hv-dim:hover span { opacity: 1; }

<div class="cg-hv-dim"><i></i><span>VIEW PROJECT</span></div>

GROSS WT. 707 B ORIGINAL

CRG-10-012

ENTRY

斜め背景スライドSkew Background

.cg-hv-skew {
  position: relative;
  display: inline-block;
  padding: 15px 44px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .14em;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  text-decoration: none;
  overflow: hidden;
  transition: color .3s;
}
.cg-hv-skew::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: #1B1A17;
  transform: translateX(-105%) skewX(-16deg);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-skew span { position: relative; }
.cg-hv-skew:hover { color: #F2B707; }
.cg-hv-skew:hover::before { transform: translateX(0) skewX(0); }

<a href="#" class="cg-hv-skew"><span>ENTRY</span></a>

GROSS WT. 664 B ORIGINAL

CRG-10-013

PROJECT 01

円形クリップリビールCircle Clip Reveal

.cg-hv-clip {
  position: relative;
  width: 200px;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: #EFECE4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cg-hv-clip i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E8590C, #C2426B);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .45s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-clip b {
  position: relative;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #1B1A17;
  transition: color .3s;
}
.cg-hv-clip:hover i { clip-path: circle(75% at 50% 50%); }
.cg-hv-clip:hover b { color: #fff; }

<div class="cg-hv-clip"><i></i><b>PROJECT 01</b></div>

GROSS WT. 721 B ORIGINAL

CRG-10-014

アイコン入れ替わりボタンIcon Swap

.cg-hv-swapicon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #3A5A78;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.cg-hv-swapicon i {
  position: relative;
  width: 15px;
  height: 15px;
  overflow: hidden;
  font-style: normal;
}
.cg-hv-swapicon svg {
  position: absolute;
  inset: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-swapicon svg:last-child { transform: translate(-130%, 130%); }
.cg-hv-swapicon:hover svg:first-child { transform: translate(130%, -130%); }
.cg-hv-swapicon:hover svg:last-child { transform: translate(0, 0); }

<button class="cg-hv-swapicon" type="button">送信<i aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg></i></button>

GROSS WT. 1185 B ORIGINAL

CRG-10-015

HOVER

角から染まるホバーCorner Fill

.cg-hv-corner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 26px 46px;
  font-weight: 900;
  letter-spacing: .12em;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
}
.cg-hv-corner::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #F2B707;
  transform: scale(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.cg-hv-corner:hover::before { transform: scale(9); }
.cg-hv-corner span { position: relative; }

<div class="cg-hv-corner"><span>HOVER</span></div>

GROSS WT. 713 B ORIGINAL

CRG-10-016

ABOUT

ホバーで波打つ文字Wave on Hover

.cg-hv-wavetext {
  display: inline-flex;
  gap: 2px;
  font-size: 21px;
  font-weight: 900;
  color: #1B1A17;
  text-decoration: none;
  padding: 6px 4px;
}
.cg-hv-wavetext span { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), color .3s; }
.cg-hv-wavetext:hover span { transform: translateY(-6px); color: #E8590C; }
.cg-hv-wavetext:hover span:nth-child(2) { transition-delay: .05s; }
.cg-hv-wavetext:hover span:nth-child(3) { transition-delay: .1s; }
.cg-hv-wavetext:hover span:nth-child(4) { transition-delay: .15s; }
.cg-hv-wavetext:hover span:nth-child(5) { transition-delay: .2s; }

<a href="#" class="cg-hv-wavetext" aria-label="ABOUT"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></a>

GROSS WT. 723 B ORIGINAL

CRG-10-017

SHIFT

枠がずれるホバーFrame Shift

.cg-hv-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 46px;
  font-weight: 900;
  letter-spacing: .14em;
  background: #fff;
  border: 2.5px solid #1B1A17;
  cursor: pointer;
}
.cg-hv-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2.5px solid #E8590C;
  transform: translate(6px, 6px);
  transition: transform .25s cubic-bezier(.3, 1.2, .5, 1);
  pointer-events: none;
}
.cg-hv-frame:hover::before { transform: translate(-6px, -6px); }

<div class="cg-hv-frame">SHIFT</div>

GROSS WT. 572 B ORIGINAL

CRG-10-018

モノクロ→カラーGrayscale Reveal

.cg-hv-mono {
  width: 200px;
  height: 124px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8590C, #F2B707 50%, #3A9BD5);
  filter: grayscale(1) contrast(.9);
  transition: filter .45s ease, transform .45s ease;
  cursor: pointer;
}
.cg-hv-mono:hover {
  filter: grayscale(0);
  transform: scale(1.03);
}

<div class="cg-hv-mono"></div>

GROSS WT. 352 B ORIGINAL

CRG-10-019

OPENSECRET INSIDE

上下に割れるホバーSplit Reveal

.cg-hv-split {
  position: relative;
  width: 210px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  background: #E8590C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cg-hv-split span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #fff;
}
.cg-hv-split i,
.cg-hv-split b {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: #fff;
  border: 2px solid #1B1A17;
  z-index: 1;
  transition: transform .4s cubic-bezier(.6, 0, .3, 1);
}
.cg-hv-split i { top: 0; border-bottom: none; border-radius: 12px 12px 0 0; }
.cg-hv-split b {
  bottom: 0;
  border-top: none;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 13px;
  letter-spacing: .16em;
  padding-top: 2px;
}
.cg-hv-split:hover i { transform: translateY(-100%); }
.cg-hv-split:hover b { transform: translateY(100%); }

<div class="cg-hv-split"><i></i><b>OPEN</b><span>SECRET INSIDE</span></div>

GROSS WT. 1019 B ORIGINAL

CRG-10-020

くるっと一回転アイコンSpin Once

.cg-hv-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #1B1A17;
  border: 2px solid #1B1A17;
  border-radius: 12px;
  background: #fff;
  transition: color .3s, background .3s;
}
.cg-hv-spin svg { transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.cg-hv-spin:hover { background: #1B1A17; color: #F2B707; }
.cg-hv-spin:hover svg { transform: rotate(180deg); }

<a href="#" class="cg-hv-spin" aria-label="設定"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></a>

GROSS WT. 1272 B ORIGINAL

CRG-10-021

発光ボーダートレースGlow Border Trace

.cg-hv-glow {
  position: relative;
  padding: 14px 32px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #1B1A17;
  background: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  z-index: 0;
}
.cg-hv-glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: conic-gradient(from 0deg, #E8590C, #F2B707, #3A5A78, #E8590C);
  z-index: -1;
  opacity: 0;
  animation: cg-hv-glow-spin 2.4s linear infinite;
  animation-play-state: paused;
  transition: opacity .3s ease;
}
.cg-hv-glow::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  background: #fff;
  z-index: -1;
}
.cg-hv-glow:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes cg-hv-glow-spin {
  to { transform: rotate(360deg); }
}

<button class="cg-hv-glow">SUBMIT</button>

GROSS WT. 851 B ORIGINAL

CRG-10-022

TARGET LOCK

コーナーが開くフォーカス枠Focus Reticle Corners

.cg-hv-reticle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 92px;
  cursor: pointer;
}
.cg-hv-reticle p {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: #1B1A17;
}
.cg-hv-rc {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid #E8590C;
  transition: inset .3s cubic-bezier(.3, 1.2, .4, 1);
}
.cg-hv-rc.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.cg-hv-rc.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.cg-hv-rc.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.cg-hv-rc.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.cg-hv-reticle:hover .cg-hv-rc.tl { top: 0; left: 0; }
.cg-hv-reticle:hover .cg-hv-rc.tr { top: 0; right: 0; }
.cg-hv-reticle:hover .cg-hv-rc.bl { bottom: 0; left: 0; }
.cg-hv-reticle:hover .cg-hv-rc.br { bottom: 0; right: 0; }

<div class="cg-hv-reticle"><span class="cg-hv-rc tl"></span><span class="cg-hv-rc tr"></span><span class="cg-hv-rc bl"></span><span class="cg-hv-rc br"></span><p>TARGET LOCK</p></div>

GROSS WT. 1168 B ORIGINAL

ホバー演出22点 在庫あり