Blogger TIPS

Googleのブログサービス「Blogger」のテンプレート・カスタマイズ・TIPSなどを紹介しています

2026/02/20

Bloggerデザイン : 画像ホバーアクション

event_note2/20/2026 editBy まつゆう forumNo comments

1. デザインのタイプ

【Awesome Image Hover / 15種の洗練されたホバーアクション】
マウスを乗せた瞬間に静止画が躍動する、視覚効果に特化したエフェクト集です。

Awesome Image Hover in Pure CSS Part I

Lily

img12

Nice Lily

Lily likes to play with crayons and pencils

View more
img1

Nice Lily

Lily likes to play with crayons and pencils

View more

Sadie

img02

Holy Sadie

Sadie never took her eyes off me.
She had a dark soul.

View more
img14

Holy Sadie

Sadie never took her eyes off me.
She had a dark soul.

View more

Honey

img04

Dreamy Honey Now

View more
img05

Dreamy Honey Now

View more

Layla

img06

Crazy Layla

When Layla appears, she brings an eternal summer along.

View more
img03

Crazy Layla

When Layla appears, she brings an eternal summer along.

View more

Zoe

img25

Creative Zoe

Zoe never had the patience of her sisters. She deliberately punched the bear in his face.

img26

Creative Zoe

Zoe never had the patience of her sisters. She deliberately punched the bear in his face.

Oscar

img09

Warm Oscar

Oscar is a decent man. He used to clean porches with pleasure.

View more
img10

Warm Oscar

Oscar is a decent man. He used to clean porches with pleasure.

View more

Marley

img11

Sweet Marley

Marley tried to convince her but she was not interested.

View more
img12

Sweet Marley

Marley tried to convince her but she was not interested.

View more

Ruby

img13

Glowing Ruby

Ruby did not need any help. Everybody knew that.

View more
img14

Glowing Ruby

Ruby did not need any help. Everybody knew that.

View more

Roxy

img15

Charming Roxy

Roxy was my best friend. She'd cross any border for me.

View more
img01

Charming Roxy

Roxy was my best friend. She'd cross any border for me.

View more

Bubba

img02

Fresh Bubba

Bubba likes to appear out of thin air.

View more
img16

Fresh Bubba

Bubba likes to appear out of thin air.

View more

Romeo

img17

Wild Romeo

Romeo never knows what he wants. He seemed to be very cross about something.

View more
img18

Wild Romeo

Romeo never knows what he wants. He seemed to be very cross about something.

View more

Dexter

img19

Strange Dexter

Dexter had his own strange way. You could watch him training ants.

View more
img12

Strange Dexter

Dexter had his own strange way. You could watch him training ants.

View more

Sarah

img13

Free Sarah

Sarah likes to watch clouds. She's quite depressed.

View more
img20

Free Sarah

Sarah likes to watch clouds. She's quite depressed.

View more

Chico

img15

Silly Chico

Chico's main fear was missing the morning bus.

View more
img04

Silly Chico

Chico's main fear was missing the morning bus.

View more

Milo

img11

Faithful Milo

Milo went to the woods. He took a fun ride and never came back.

View more
img03

Faithful Milo

Milo went to the woods. He took a fun ride and never came back.

View more

2. デザインの特徴

  • 15種の多彩なホバーアクション
    スライド、ズーム、透過、枠線演出など、モダンなWebデザインに欠かせない動きを網羅。
  • 完全プレースホルダー化
    「画像URL」「タイトル」「本文」を入れ替えるだけで、誰でも簡単にギャラリーが作成できます。
  • THE GALLERY スタイル統合
    高級感のあるダーク背景と、PC2列・スマホ1列のレスポンシブ・グリッドを維持したまま、15種のエフェクトを搭載しました。

3. 紹介コード（コピペ用）



<link href='https://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
<style>
/* --- Base & Blogger Optimization --- */
.content{font-family:'Raleway',sans-serif;background:#2f3238;color:#fff;padding:20px 0;text-align:center}.content h1,.content h2{color:#fff;text-transform:uppercase}.grid{display:flex;flex-wrap:wrap;justify-content:center;max-width:1200px;margin:0 auto;list-style:none;padding:0}.grid figure{position:relative;overflow:hidden;margin:10px;width:45%;min-width:320px;max-height:360px;background:#3085a3;cursor:pointer}.grid figure img{position:relative;display:block;width:100%;opacity:.8;transition:all .35s;padding:0!important;margin:0!important;border:none!important;box-shadow:none!important}.grid figure figcaption{position:absolute;top:0;left:0;width:100%;height:100%;padding:2em;color:#fff;text-transform:uppercase;backface-visibility:hidden}.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}.grid figure h2{font-weight:300;margin:0;font-size:1.5em;color:#fff}.grid figure h2 span{font-weight:800}.grid figure p{margin:0;font-size:68.5%;letter-spacing:1px}

/* --- Hover Effects CSS (Lily to Milo) --- */
figure.effect-lily img{width:calc(100% + 50px);transform:translate3d(-40px,0,0)}figure.effect-lily figcaption{text-align:left}figure.effect-lily figcaption>div{position:absolute;bottom:0;left:0;padding:2em;width:100%;height:50%}figure.effect-lily h2,figure.effect-lily p{transform:translate3d(0,40px,0);transition:transform .35s}figure.effect-lily p{opacity:0;transition:opacity .2s,transform .35s}figure.effect-lily:hover img,figure.effect-lily:hover h2,figure.effect-lily:hover p{transform:translate3d(0,0,0)}figure.effect-lily:hover p{opacity:1}
figure.effect-sadie h2{position:absolute;top:50%;left:0;width:100%;transform:translate3d(0,-50%,0);transition:transform .35s}figure.effect-sadie figcaption::before{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(72,76,97,0) 0%,rgba(72,76,97,.8) 75%);content:'';opacity:0;transform:translate3d(0,50%,0);transition:opacity .35s,transform .35s}figure.effect-sadie p{position:absolute;bottom:0;left:0;padding:2em;width:100%;opacity:0;transform:translate3d(0,10px,0);transition:opacity .35s,transform .35s}figure.effect-sadie:hover h2{transform:translate3d(0,-50%,0) translate3d(0,-40px,0)}figure.effect-sadie:hover figcaption::before,figure.effect-sadie:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-honey{background:#4a3753}figure.effect-honey img{transition:opacity .35s}figure.effect-honey:hover img{opacity:.5}figure.effect-honey figcaption::before{position:absolute;bottom:0;left:0;width:100%;height:10px;background:#fff;content:'';transform:translate3d(0,10px,0);transition:transform .35s}figure.effect-honey h2{position:absolute;bottom:0;left:0;padding:1em 1.5em;width:100%;text-align:left;transform:translate3d(0,-30px,0);transition:transform .35s}figure.effect-honey:hover figcaption::before,figure.effect-honey:hover h2{transform:translate3d(0,0,0)}
figure.effect-layla{background:#18a5b0}figure.effect-layla img{transition:opacity .35s,transform .35s}figure.effect-layla figcaption::before,figure.effect-layla figcaption::after{position:absolute;content:'';opacity:0;transition:opacity .35s,transform .35s}figure.effect-layla figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;transform:scale(0,1)}figure.effect-layla figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;transform:scale(1,0)}figure.effect-layla h2{padding-top:26%;transition:transform .35s}figure.effect-layla p{padding:.5em 2em;opacity:0;transform:translate3d(0,-10px,0);transition:all .35s}figure.effect-layla:hover img{opacity:.7;transform:translate3d(0,-30px,0)}figure.effect-layla:hover figcaption::before,figure.effect-layla:hover figcaption::after{opacity:1;transform:scale(1)}figure.effect-layla:hover h2,figure.effect-layla:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-zoe figcaption{top:auto;bottom:0;padding:1em;height:3.75em;background:#fff;color:#3c4a50;transition:transform .35s;transform:translate3d(0,100%,0)}figure.effect-zoe h2{display:inline-block;float:left;transition:transform .35s;transform:translate3d(0,200%,0);color:#3c4a50}figure.effect-zoe p.icon-links a{float:right;color:#3c4a50;font-size:1.4em}figure.effect-zoe p.description{position:absolute;bottom:8em;padding:2em;color:#fff;text-transform:none;font-size:90%;opacity:0;transition:opacity .35s}figure.effect-zoe:hover img{transform:translate3d(0,-40px,0)}figure.effect-zoe:hover figcaption,figure.effect-zoe:hover h2{transform:translate3d(0,0,0)}figure.effect-zoe:hover p.description{opacity:1}
figure.effect-oscar{background:#24585e}figure.effect-oscar figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';opacity:0;transition:all .35s;transform:scale(0)}figure.effect-oscar h2{margin:20% 0 10px 0;transition:transform .35s}figure.effect-oscar p{opacity:0;transition:all .35s;transform:scale(1.2)}figure.effect-oscar:hover img{opacity:.4}figure.effect-oscar:hover figcaption::before{opacity:1;transform:scale(1)}figure.effect-oscar:hover h2{transform:translate3d(0,-20px,0)}figure.effect-oscar:hover p{opacity:1;transform:scale(1)}
figure.effect-marley h2{position:relative;padding:10% 0 10px;transition:transform .35s;transform:translate3d(0,20px,0)}figure.effect-marley h2::after{position:absolute;top:100%;left:45%;width:10%;height:2px;background:#fff;content:'';transform:translate3d(0,40px,0);opacity:0;transition:all .35s}figure.effect-marley p{opacity:0;transition:all .35s;transform:translate3d(0,40px,0)}figure.effect-marley:hover h2,figure.effect-marley:hover h2::after,figure.effect-marley:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-ruby img{opacity:.7;transition:all .35s;transform:scale(1.15)}figure.effect-ruby:hover img{opacity:.5;transform:scale(1)}figure.effect-ruby h2{margin-top:20%;transition:transform .35s;transform:translate3d(0,20px,0)}figure.effect-ruby p{margin:1em 0 0;padding:3em;border:1px solid #fff;opacity:0;transition:all .35s;transform:translate3d(0,20px,0) scale(1.1)}figure.effect-ruby:hover h2{transform:translate3d(0,0,0)}figure.effect-ruby:hover p{opacity:1;transform:translate3d(0,0,0) scale(1)}
figure.effect-roxy{background:#050100}figure.effect-roxy img{width:calc(100% + 60px);transition:all .35s;transform:translate3d(-50px,0,0)}figure.effect-roxy figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';opacity:0;transition:all .35s;transform:translate3d(-20px,0,0)}figure.effect-roxy p{opacity:0;transition:all .35s;transform:translate3d(-10px,0,0)}figure.effect-roxy:hover img{opacity:.7;transform:translate3d(0,0,0)}figure.effect-roxy:hover figcaption::before,figure.effect-roxy:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-bubba img{opacity:.7;transition:opacity .35s}figure.effect-bubba:hover img{opacity:.4}figure.effect-bubba figcaption::before,figure.effect-bubba figcaption::after{position:absolute;top:30px;right:30px;bottom:30px;left:30px;content:'';opacity:0;transition:all .35s}figure.effect-bubba figcaption::before{border-top:1px solid #fff;border-bottom:1px solid #fff;transform:scale(0,1)}figure.effect-bubba figcaption::after{border-right:1px solid #fff;border-left:1px solid #fff;transform:scale(1,0)}figure.effect-bubba h2{padding-top:15%;transition:transform .35s;transform:translate3d(0,-20px,0)}figure.effect-bubba p{padding:20px 2.5em;opacity:0;transition:all .35s;transform:translate3d(0,20px,0)}figure.effect-bubba:hover figcaption::before,figure.effect-bubba:hover figcaption::after{opacity:1;transform:scale(1)}figure.effect-bubba:hover h2,figure.effect-bubba:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-romeo{perspective:1000px}figure.effect-romeo img{transition:all .35s;transform:translate3d(0,0,300px)}figure.effect-romeo:hover img{opacity:.6;transform:translate3d(0,0,0)}figure.effect-romeo figcaption::before,figure.effect-romeo figcaption::after{position:absolute;top:50%;left:50%;width:80%;height:1px;background:#fff;content:'';transition:all .35s;transform:translate3d(-50%,-50%,0)}figure.effect-romeo figcaption::before{transform:translate3d(-50%,-50%,0) rotate(45deg)}figure.effect-romeo figcaption::after{transform:translate3d(-50%,-50%,0) rotate(-45deg)}figure.effect-romeo h2,figure.effect-romeo p{position:absolute;top:50%;left:0;width:100%;transition:transform .35s}figure.effect-romeo h2{transform:translate3d(0,-50%,0) translate3d(0,-150%,0)}figure.effect-romeo p{padding:.25em 2em;transform:translate3d(0,-50%,0) translate3d(0,150%,0)}figure.effect-romeo:hover h2{transform:translate3d(0,-50%,0) translate3d(0,-100%,0)}figure.effect-romeo:hover p{transform:translate3d(0,-50%,0) translate3d(0,100%,0)}
figure.effect-dexter{background:#1f2b2d}figure.effect-dexter img{transition:opacity .35s}figure.effect-dexter:hover img{opacity:.4}figure.effect-dexter figcaption::after{position:absolute;right:30px;bottom:30px;left:30px;height:calc(50% - 30px);border:7px solid #fff;content:'';transition:transform .35s;transform:translate3d(0,-100%,0)}figure.effect-dexter:hover figcaption::after{transform:translate3d(0,0,0)}figure.effect-dexter p{position:absolute;right:60px;bottom:60px;left:60px;opacity:0;transition:all .35s;transform:translate3d(0,-100px,0)}figure.effect-dexter:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-sarah{background:#42b078}figure.effect-sarah img{width:calc(100% + 20px);transition:all .35s;transform:translate3d(-10px,0,0)}figure.effect-sarah:hover img{opacity:.4;transform:translate3d(0,0,0)}figure.effect-sarah h2::after{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#fff;content:'';transition:transform .35s;transform:translate3d(-100%,0,0)}figure.effect-sarah:hover h2::after{transform:translate3d(0,0,0)}figure.effect-sarah p{padding:1em 0;opacity:0;transition:all .35s;transform:translate3d(100%,0,0)}figure.effect-sarah:hover p{opacity:1;transform:translate3d(0,0,0)}
figure.effect-chico img{transition:all .35s;transform:scale(1.12)}figure.effect-chico:hover img{opacity:.5;transform:scale(1)}figure.effect-chico figcaption::before{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border:1px solid #fff;content:'';transform:scale(1.1);transition:all .35s;opacity:0}figure.effect-chico p{opacity:0;transition:all .35s;margin:0 auto;max-width:200px;transform:scale(1.5)}figure.effect-chico:hover figcaption::before,figure.effect-chico:hover p{opacity:1;transform:scale(1)}
figure.effect-milo{background:#2e5d5a}figure.effect-milo img{width:calc(100% + 60px);transition:all .35s;transform:translate3d(-30px,0,0) scale(1.12)}figure.effect-milo:hover img{opacity:.5;transform:translate3d(0,0,0) scale(1)}figure.effect-milo p{transition:all .35s;transform:translate3d(0,20px,0);opacity:0}figure.effect-milo:hover p{opacity:1;transform:translate3d(0,0,0)}
</style>

<div class="content">
  <h2>Lily</h2>
  <div class="grid">
    <figure class="effect-lily">
      <img src="画像URL" alt="" />
      <figcaption><div><h2>タイトル <span>Lily</span></h2><p>本文</p></div><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-lily">
      <img src="画像URL" alt="" />
      <figcaption><div><h2>タイトル <span>Lily</span></h2><p>本文</p></div><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Sadie</h2>
  <div class="grid">
    <figure class="effect-sadie">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Sadie</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-sadie">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Sadie</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Honey</h2>
  <div class="grid">
    <figure class="effect-honey">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Honey</span> <i>Now</i></h2><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-honey">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Honey</span> <i>Now</i></h2><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Layla</h2>
  <div class="grid">
    <figure class="effect-layla">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Layla</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-layla">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Layla</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Zoe</h2>
  <div class="grid">
    <figure class="effect-zoe">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Zoe</span></h2><p class="icon-links"><a href="#">♥</a><a href="#">👁</a></p><p class="description">本文</p></figcaption>
    </figure>
    <figure class="effect-zoe">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Zoe</span></h2><p class="icon-links"><a href="#">♥</a><a href="#">👁</a></p><p class="description">本文</p></figcaption>
    </figure>
  </div>
  <h2>Oscar</h2>
  <div class="grid">
    <figure class="effect-oscar">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Oscar</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-oscar">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Oscar</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Marley</h2>
  <div class="grid">
    <figure class="effect-marley">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Marley</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-marley">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Marley</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Ruby</h2>
  <div class="grid">
    <figure class="effect-ruby">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Ruby</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-ruby">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Ruby</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Roxy</h2>
  <div class="grid">
    <figure class="effect-roxy">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Roxy</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-roxy">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Roxy</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Bubba</h2>
  <div class="grid">
    <figure class="effect-bubba">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Bubba</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-bubba">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Bubba</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Romeo</h2>
  <div class="grid">
    <figure class="effect-romeo">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Romeo</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-romeo">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Romeo</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Dexter</h2>
  <div class="grid">
    <figure class="effect-dexter">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Dexter</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-dexter">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Dexter</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Sarah</h2>
  <div class="grid">
    <figure class="effect-sarah">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Sarah</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-sarah">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Sarah</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Chico</h2>
  <div class="grid">
    <figure class="effect-chico">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Chico</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-chico">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Chico</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
  <h2>Milo</h2>
  <div class="grid">
    <figure class="effect-milo">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Milo</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
    <figure class="effect-milo">
      <img src="画像URL" alt="" /><figcaption><h2>タイトル <span>Milo</span></h2><p>本文</p><a href="#">View more</a></figcaption>
    </figure>
  </div>
</div>

修正コード

もし上のCSSで動かない場合は下のCSSを追加で適用してみてください。


<style>
/* Zoe専用の修正CSS */
figure.effect-zoe {
  background: #3085a3 !important; /* ベースの青 */
}

figure.effect-zoe figcaption {
  top: auto !important;
  bottom: 0 !important;
  padding: 1em !important;
  height: 4em !important; /* キャプションの高さ */
  background: #fff !important; /* 白背景 */
  color: #3c4a50 !important;
  transition: transform 0.35s !important;
  transform: translate3d(0, 100%, 0) !important;
}

figure.effect-zoe h2 {
  float: left !important;
  color: #3c4a50 !important; /* 黒文字に強制 */
  transition: transform 0.35s !important;
  transform: translate3d(0, 200%, 0) !important;
  margin: 0 !important;
  font-size: 1.5rem !important;
}

figure.effect-zoe p.description {
  position: absolute !important;
  bottom: 6em !important;
  padding: 2em !important;
  color: #fff !important; /* 本文は画像上の白文字 */
  text-transform: none !important;
  font-size: 90% !important;
  opacity: 0 !important;
  transition: opacity 0.35s !important;
  backface-visibility: hidden !important;
}

/* ホバー時の挙動 */
figure.effect-zoe:hover img {
  transform: translate3d(0, -40px, 0) !important;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2 {
  transform: translate3d(0, 0, 0) !important;
}

figure.effect-zoe:hover p.description {
  opacity: 1 !important;
}  

  
/* Dexter修正：枠線の位置とホバー検知を確実に */
figure.effect-dexter {
  background: #1f2b2d !important;
}

figure.effect-dexter img {
  opacity: 1;
  transition: opacity 0.35s !important;
}

figure.effect-dexter:hover img {
  opacity: 0.4 !important;
}

/* 枠線の設定：絶対位置を固定 */
figure.effect-dexter figcaption::after {
  position: absolute !important;
  right: 30px !important;
  bottom: 30px !important;
  left: 30px !important;
  height: 200px !important; /* 高さを固定して確実に見せる */
  border: 7px solid #fff !important;
  content: '' !important;
  transition: transform 0.35s !important;
  transform: translate3d(0, -100%, 0) !important;
  pointer-events: none; /* 枠がマウスを邪魔しないように */
}

figure.effect-dexter:hover figcaption::after {
  transform: translate3d(0, 0, 0) !important;
}

/* 説明文の設定 */
figure.effect-dexter p {
  position: absolute !important;
  right: 60px !important;
  bottom: 80px !important;
  left: 60px !important;
  opacity: 0 !important;
  transition: opacity 0.35s, transform 0.35s !important;
  transform: translate3d(0, -50px, 0) !important;
}

figure.effect-dexter:hover p {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}  
  
/* Sarah修正：ラインの出現と横スライドを確実に */
figure.effect-sarah {
  background: #42b078 !important; /* ベースの緑 */
}

figure.effect-sarah img {
  width: calc(100% + 20px) !important;
  max-width: none !important;
  transition: opacity 0.35s, transform 0.35s !important;
  transform: translate3d(-10px, 0, 0) !important;
}

figure.effect-sarah:hover img {
  opacity: 0.4 !important;
  transform: translate3d(0, 0, 0) !important;
}

/* タイトル下のライン演出 */
figure.effect-sarah h2 {
  position: relative !important;
  padding: 0.5em 0 !important;
}

figure.effect-sarah h2::after {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: #fff !important;
  content: '' !important;
  transition: transform 0.35s !important;
  transform: translate3d(-101%, 0, 0) !important; /* 左側に隠す */
}

figure.effect-sarah:hover h2::after {
  transform: translate3d(0, 0, 0) !important;
}

/* 本文の横スライド演出 */
figure.effect-sarah p {
  padding: 1em 0 !important;
  opacity: 0 !important;
  transition: opacity 0.35s, transform 0.35s !important;
  transform: translate3d(100%, 0, 0) !important; /* 右側に隠す */
}

figure.effect-sarah:hover p {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}  
  
/* Milo修正：画像の奥行きとキャプションの連動を確実に */
figure.effect-milo {
  background: #2e5d5a !important; /* ベースカラー（深緑系） */
}

figure.effect-milo img {
  width: calc(100% + 60px) !important;
  max-width: none !important;
  opacity: 1 !important;
  transform: translate3d(-30px, 0, 0) scale(1.12) !important;
  transition: opacity 0.35s, transform 0.35s !important;
  backface-visibility: hidden;
}

figure.effect-milo:hover img {
  opacity: 0.5 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* タイトル部分：背景の疑似要素と位置 */
figure.effect-milo h2 {
  position: relative !important;
  padding: 10% 0 !important;
  transition: transform 0.35s !important;
}

/* 説明文：不透明度とスライド */
figure.effect-milo p {
  padding: 0 10% 1em !important;
  width: 100% !important;
  opacity: 0 !important;
  transition: opacity 0.35s, transform 0.35s !important;
  transform: translate3d(0, 20px, 0) !important;
  border-right: 1px solid #fff; /* Milo特有の右端の線 */
  text-align: right;
}

figure.effect-milo:hover p {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}  

/* Marley修正：タイトルのラインとテキスト浮き上がり */
figure.effect-marley {
  background: #303030 !important; /* 暗めの背景 */
}

figure.effect-marley img {
  opacity: 0.9 !important;
  transition: opacity 0.35s, transform 0.35s !important;
}

figure.effect-marley:hover img {
  opacity: 0.4 !important; /* 画像を暗くして文字を浮かせる */
}

/* タイトルの設定と下線 */
figure.effect-marley h2 {
  position: relative !important;
  margin-bottom: 30px !important;
  transition: transform 0.35s !important;
  transform: translate3d(0, 20px, 0) !important;
}

figure.effect-marley h2::after {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important; /* ラインの太さ */
  background: #fff !important; /* ここも白！ */
  content: '' !important;
  transform: scale3d(0, 1, 1) !important; /* 最初は横幅0 */
  transition: transform 0.35s !important;
}

figure.effect-marley:hover h2::after {
  transform: scale3d(1, 1, 1) !important; /* ホバーで全幅に広がる */
}

/* 説明文（p）：下からふわっと */
figure.effect-marley p {
  opacity: 0 !important;
  transition: opacity 0.35s, transform 0.35s !important;
  transform: translate3d(0, 30px, 0) !important;
}

figure.effect-marley:hover h2 {
  transform: translate3d(0, 0, 0) !important;
}

figure.effect-marley:hover p {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}
</style>
まつゆう
アラフォーゲーマーがいろんなゲームを楽しみながらプレイしています。YouTube・Twitch・Mixerで配信中!! 東京パフォーマンスドールの狂信者。 好きすぎてドメインを取得してファンサイトを運営中。
tweet facebook Pocket B!はてブ LINE

0 comments:

コメントを投稿