【CSS】a:hoverで画像を半透明に白くするリンク

まいど！
大阪で話題のサブスク運用でホームページ制作をしている
株式会社ディー・オー・エスのドスブイサポートです

今日は画像にマウスカーソルを乗せた時にこれはリンクですよーって
表現するCSSを説明させて頂きたいと思います

a:hoverでCSSを指定している

このレベルなら皆さんご存じかと思いますが
aリンクがhoverで乗せた時にどうするかって事ですよね

HTML

<div class="product_item row">
            <div class="col-sm-6 col-lg-3">
                <ul>
                    <li>
<a href="/">
                        <figure>
                            <img src="{{ asset('assets/img/top/product_01.jpg') }}" alt="マスク">
                            <figcaption>
                                <p>マスク</p>
                            </figcaption>
                        </figure>
                    </a></li>
                </ul>
            </div><!--col-->
</div>

こんなhtmlだった場合をサンプルにします。

product_itemの中のli 自体をリンクさせているので、今回は画像というより
リスト自体にaリンクしてます。

CSS

.product_item a:hover img{
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

「opacity: 0.7;」で画像を透明にする効果ですので数値で濃度を変えれます。
これで画像が白く半透明になります

まとめ

いかがでしたでしょうか
単なるリンクされどリンク、少しの効果で見栄えが変わりますよね

通常のaタグの青にアンダーラインでももちろん「ここはクリックだと認識」
しやすいのはもちろんそうなんですが、こういった効果もエッセンスとしては大事ですよね

以上

最後までご覧いただきまして有難うございました！
初期費用無料でWEB制作を依頼する場合はぜひとも弊社にお声がけ下さい

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter