CSS マウスホバー画像マスク効果の実装コード

この記事では主に CSS マウスホバー画像マスク効果の実装コードを紹介します。お役に立てれば幸いです。

css

p>p{    background: rgba(255, 255, 255, 0);    transition: background 0.3s linear;}p:hover>p{    background: rgba(228, 228, 228, 0.29);}

html

<p style="width:200px;height:200px;position: absolute;">
    <img src="img/img.jpg" style="width: 100%;height: 100%;"/>
    <p style="position: absolute;width: 100%;height: 100%;top: 0;"></p></p>

関連推奨事項:

javascript マウスオーバー画像は元の画像を表示します マウスを外すと元の画像が消えます (複数の画像)_画像の特殊効果

以上がCSS マウスホバー画像マスク効果の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。