CSS3・html5でのテキスト・見出しの装飾サンプル

ここで紹介するソースコードはご自由に利用いただけるものですが、アイコンなど一部にMITライセンスのものがありますので そのソースについては適切に著作権表示を行っています。 詳しくは著作権についてをご覧ください。
(注意)IE11には対応していません。

カテゴリ別に表示出来ます

  • >>画像の操作(4) ロールオーバー


    ※ 画像にエフェクトをかけます。 transformプロパティとfilterで行います。
    マウスオーバーで画像をズームアップし、ぼかしを入れます。
    アニメーションで行っています。

    [ 閉じる ]

    htmlソース

    <p class="hover-ex11"> <img src="/sysdata/images/sample/title_back1.png"> </p>

    CSS

    .hover-ex11 { height: 90px; width: 680px; overflow: hidden; padding: 0 !important; display: flex; align-items: center; } .hover-ex11 img{ width: 100%; transition: all .6s; } .hover-ex11 img:hover{ transform:scale(1.2,1.2); filter: blur(5px); }