wordpress cocoonテーマで使えるサムネイル アニメーション効果

ガラスカード風

/* サムネイル */
.a-wrap {
  overflow: hidden;
  border-radius: 20px;
  transition: all .5s ease;
}

/* 画像 */
.a-wrap img {
  transition: transform .8s cubic-bezier(.19,1,.22,1);
}

/* ホバー */
.a-wrap:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,.15),
    0 10px 20px rgba(0,0,0,.08);
}

.a-wrap:hover img {
  transform: scale(1.08);
}

• 画像がゆっくり拡大
• カード全体が浮く
• 高級感がある

パララックス風

.a-wrap {
  overflow: hidden;
}

.a-wrap img {
  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    filter .8s ease;
}

.a-wrap:hover img {
  transform: scale(1.15);
  filter: brightness(1.05);
}

• Appleサイトっぽい
• 上品
• ブログとの相性◎

光が走るエフェクト

.a-wrap {
  position: relative;
  overflow: hidden;
}

.a-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.4),
      transparent
    );
  transform: skewX(-25deg);
  z-index: 2;
}

.a-wrap:hover::before {
  left: 200%;
  transition: 1s;
}

• ハイブランドサイト風
• なかなか見かけない
• 写真ブログと相性抜群

映画ポスター風

.a-wrap {
  overflow: hidden;
}

.a-wrap img {
  transition: all .7s ease;
}

.a-wrap:hover img {
  transform: scale(1.1);
  filter:
    brightness(.8)
    contrast(1.1)
    saturate(1.15);
}

• 映画サイト風
• SNSで見かけない
• お洒落

今風の「立体チルト風」

.a-wrap {
  transition: all .5s ease;
  transform-style: preserve-3d;
}

.a-wrap:hover {
  transform:
    perspective(1000px)
    rotateX(4deg)
    rotateY(-4deg)
    translateY(-8px);
}

• 海外のポートフォリオサイト風
• かなり目を引く

色々組み合わせ

.a-wrap{
  overflow:hidden;
  border-radius:20px;
  transition:.5s;
}

.a-wrap img{
  transition:
    transform .8s cubic-bezier(.19,1,.22,1),
    filter .8s ease;
}

.a-wrap:hover{
  transform:
    perspective(1000px)
    rotateX(2deg)
    rotateY(-2deg)
    translateY(-8px);

  box-shadow:
    0 25px 50px rgba(0,0,0,.15);
}

.a-wrap:hover img{
  transform:scale(1.08);
  filter:brightness(1.05);
}

✅ 浮き上がる
✅ 少し立体感が出る
✅ 画像がゆっくりズームする

---