Linkタグの画像にだけhoverが効かない

実現したいこと

画像をホバーした時に透明にしたい

前提

複数のLinkタグで画像と文字を書いているのですが、なぜか画像にだけホバーが効きません。

スペルなど間違えてるのかと思い画像に当てているLinkを利用して文字を書いた場合ホバーすると透明になります。

どうしたら解決できるでしょうか。
ご教授お願いします。

該当のソースコード

Next.js ソースコード import Image from "next/image"; import Link from "next/link"; import React from "react"; const ArticleList = () => { return ( <div> <article className="shadow my-4"> <a href="#" className="hover:opacity-40"> <Image src="https://source.unsplash.com/collection/1346951/1000x500?sig=54" alt="記事の写真" width={1200} height={300} /> </a> <div> <Link href="#">technology</Link> <Link href="#">Next.jsの勉強中</Link> <p>By shincode,Published on 2023/08/29</p> <Link href="#"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt sit praesentium quidem ullam nisi illum quam sunt voluptatibus facilis, sint debitis necessitatibus velit doloremque repudiandae veniam eligendi hic. Repellat, hic? </Link> <Link href="#">続きを読む</Link> </div> </article> </div> ); }; export default ArticleList;

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。