CSSでimgのhoverのafterでtransitionが効かない時の対処法

CSSで、imgのhoverのafterでtransitionが効かない時があったので、その対処方法をまとめました。

styled-componentsを利用しているので、コピペでそのまま使えます

※細かいロジックは実装してください

理想イメージ

マウスを重ねると、赤いborderと薄い赤でbackground-colorが反映されること。

原因1: imgのhoverでafterを実装している

ソースコード

const Sample1 = styled.div`
  position: relative;
  width: 100%;
  margin: 1rem auto;
  img {
    position: relative;
    display: block;
    width: 240px;
    height: 240px;
    margin: auto;
    box-sizing: border-box;
    border: 4px solid transparent;
    border-radius: 50%;
    transition: 1.0s;
    &:hover {
      border: 4px solid red;
      &:after {
        position: absolute;
        top: 0;
        display: block;
        content: '';
        margin: auto;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background-color: rgba(255, 0, 0, .3);
      }
    }
  }
`
<Sample1>
  <img src="/画像パス" />
</Sample1>

ブラウザでの表示結果

imgタグでは、内部にコンテンツを持つことができないため、afterを実装することができません。

原因2: divのhoverにだけafterを実装している

ソースコード

const Sample2 = styled.div`
  position: relative;
  width: 100%;
  margin: 1rem auto;
  div {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    margin: auto;
    transition: 1.0s;
    img {
      position: relative;
      width: 240px;
      height: 240px;
      margin: auto;
      border-radius: 50%;
      border: 4px solid transparent;
      transition: 1.0s;
    }
    &:hover {
      img {
        border: 4px solid red;
      }
      &:after {
        position: absolute;
        top: 0;
        display: block;
        content: '';
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background-color: rgba(255, 0, 0, .3);
      }
    }
  }
`
<Sample2>
  <div>
    <img src="/画像パス" />
  </div>
</Sample2>

ブラウザでの表示結果

divタグで実装する方法に修正しましたが、これではtransitionが効きません。

解決策: divの非hoverとhoverにafterを実装する

ソースコード

const Sample3 = styled.div`
  position: relative;
  width: 100%;
  margin: 1rem auto;
  div {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    margin: auto;
    transition: 1.0s;
    img {
      position: relative;
      width: 240px;
      height: 240px;
      margin: auto;
      border-radius: 50%;
      border: 4px solid transparent;
      transition: 1.0s;
    }
    &:after {
      position: absolute;
      top: 0;
      display: block;
      content: '';
      width: 240px;
      height: 240px;
      border-radius: 50%;
      transition: 1.0s;
    }
    &:hover {
      img {
        border: 4px solid red;
      }
      &:after {
        background-color: rgba(255, 0, 0, .3);
      }
    }
  }
`
<Sample3>
  <div>
    <img src="/画像パス" />
  </div>
</Sample3>

ブラウザでの表示結果

divタグの非hoverとhoverで実装することで、transitionとafterの内容を反映させることが可能です。

プログラミングにオススメの本

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

仕組みと使い方がわかる Docker&Kubernetesのきほんのきほん

新着記事

SESエンジニアの引き抜き時の魅力的な高条件

#キャリア#転職#SES

SES(客先常駐)をしていると、優秀なエンジニアは引き抜き行為(スカウト)を他社からいただくことがあります。この引き抜き時の条件提示は衝撃的な高待遇が多く、その内容を紹介します。

エンジニアがノイズキャンセリングイヤホンを使うと劇的に世界が変わった

#ガジェット#イヤホン#Apple AirPods Pro

エンジニアには集中する時間が必須で、その時間を維持するには雑音を消す必要があります。そんな時、ノイズキャンセリングイヤホンのApple AirPods Proを手に入れると世界が劇的に変化しました。

Slack API chat.postMessageで改行を利用する方法

#プログラミング#JavaScript#Slack#API

Slack API「chat.postMessage」を利用して、JavaScriptからSlackへ改行入りのメッセージを送信しました。しかし、上手く反映されないので対応方法をまとめました。

企業は面接で意識高い系エンジニアを採用してはいけない

#経営#ビジネス#採用#転職#面接#意識高い系

会社や組織は、意識高い系エンジニアに内定を出すことはしっかりと考えた方がいいでしょう。もし採用すると会社に悪影響を及ぼす可能性があります。その事例を紹介します。

Gatsby.jsでCannot find module '../build/Release/sharp.node'エラーの解決策

#JavaScript#React.js#Gatsby.js#Node.js#npm#Docker#プログラミング

Gatsby.jsで`Cannot find module '../build/Release/sharp.node'`のエラーが発生したので、その対応方法をまとめました。

オススメの記事

SES(客先常駐)で市場価値が下がるエンジニアの特徴

#SES#転職#給料#キャリア##実態

数々のSES企業を見てきましたが、いくつか共通する、市場価値が下がるエンジニアの特徴を紹介します。

未経験からSES(客先常駐)エンジニアに転職して体験した実態と闇

#SES#転職##実態

未経験からSES(客先常駐)に転職をして、エンジニアになった方々から体験した実態と闇をお聞きしました。

求人で「フラットでアットホーム」なIT企業へ入社する時の注意

#経営#組織#駆け出しエンジニア#就職#転職#SES

「フラットでアットホーム」と宣伝している会社が多く存在します。しかし、その表現には、大きな落とし穴があります。

未経験からエンジニアになるために必要なお金

#駆け出しエンジニア#プログラミングスクール#面接

未経験エンジニア向けのビジネスが最近展開されています。一体どれくらいかければエンジニアになれるのか計算しました。

未経験から独学(スクール)でエンジニアになれる人となれない人の違い

#駆け出しエンジニア#プログラミングスクール#面接

未経験から独学(スクール含む)でエンジニアを目指す人が多いです。しかし、全員がエンジニアになれるわけではありません。なれる人となれない人の違いを説明します。

勉強や開発をするための時間を確保する方法

#駆け出しエンジニア#リモートワーク#在宅勤務#ガジェット#時間#勉強

みなさんは普段開発の時間を確保できていますか?駆け出しエンジニアの方でも、日々、時間の確保に苦労していると思います。今回は、社会人で時間の確保をするための方法を紹介します。

リモートワークエンジニアの平日の1日のルーティーン

#ルーティーン#リモートワーク#在宅勤務

コロナ禍による影響で、会社がフルリモートワークとなりました。その優雅なエンジニアのルーティーンを紹介します。

会社のリモートワークで帰属意識が下がる「してはいけない」こと

#リモートワーク#在宅勤務#離職

最近、リモートワークが導入されることが多くなり、日本でも一般的な働き方となりました。しかし、当記事の内容を続けてしまうと、帰属意識が低くなり、離職率をあげてしまう可能性が高いです。