Bloggerデザイン : スリットヒーロー

1. デザインのタイプ

Dual-Slit Parallel Hero
2枚の画像が鋭いスリットで切り裂かれたような、スタイリッシュなヒーローセクションです。マウスホバーに合わせて画像がダイナミックにスライドし、視覚的なインパクトを与えます。

On-The-Road

We get you to work safely

Shop Now

Off-The-Road

And take care of you while you're there

Shop Now

2. デザインの特徴

• 横スライド・アニメーション
  マウスホバーで画像が左右に滑らかに伸び縮みし、ダイナミックに表示領域が変化するインタラクティブな設計です。
• ズームアップ効果
  ホバーした瞬間に中の画像がじわっと拡大。スライドの動きと重なることで、奥行きのある視覚効果を生み出します。
• 角度固定のスリット
  パネルの幅が変わっても斜めの角度が一切変わらないため、ホバー中も隙間が歪まず、常に15pxの平行なラインを維持します。

3. 紹介コード

ブログのトップページや、2つのカテゴリーを強調したいセクションに最適です。HTML構造はシンプルですが、CSSで緻密に角度を制御しています。

<div id="hero__home">
  <div class="hero__item">
    <img src="画像URL1">
    <header class="hero__caption caption--top-left">
      <h2 class="hero--title">TITLE A</h2>
      <h3 class="hero--subtitle">SUBTITLE A</h3>
      <a class="hero--btn" href="#">Button</a>
    </header>
    <div class="overlay"></div>
  </div>

  <div class="hero__item last">
    <img src="画像URL2">
    <header class="hero__caption caption--bottom-right">
      <h2 class="hero--title">TITLE B</h2>
      <h3 class="hero--subtitle">SUBTITLE B</h3>
      <a class="hero--btn" href="#">Button</a>
    </header>
    <div class="overlay"></div>
  </div>
</div>

<style>
#hero__home {
  display: flex;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #000;
  gap: 15px;
}

.hero__item {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.6s ease;
}

.hero__item img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  transition: transform 0.8s ease;
}

.hero__item:first-child {
  clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0 100%);
  margin-right: -120px; 
  z-index: 1;
}

.hero__item.last {
  clip-path: polygon(120px 0, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}

#hero__home .hero__caption {
  position: absolute;
  z-index: 4;
  height: auto !important;
  background-color: transparent !important;
  padding: 0;
  margin: 0;
  color: #fff;
}

.caption--top-left { top: 30px; left: 30px; text-align: left !important; }
.caption--bottom-right { bottom: 30px; right: 30px; text-align: right !important; }

.hero--title { font-size: 24px; margin: 0; font-weight: 700; color: #fff !important; }
.hero--subtitle { font-size: 14px; margin: 5px 0 15px; color: #fff !important; }

.hero--btn {
  display: inline-block;
  padding: 6px 18px;
  font-size: 13px;
  background: transparent;
  color: #fff !important;
  border: 1px solid #fff;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.hero--btn:hover { background: #fff; color: #000 !important; }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  transition: background 0.4s;
}

.hero__item:hover { flex: 1.4; }
.hero__item:hover .overlay { background: rgba(0, 0, 0, 0.1); }
.hero__item:hover img { transform: translate(-50%, -50%) scale(1.1); }
</style>