【css】画像のロールオーバーの表現

cssロールオーバー表現のss WEB制作
WEB制作

最も使われているのは多分「透過」ですよね。その次に「画像の切り替え」でしょうか。
この記事ではcssのみのロールオーバーの表現をいくつかまとめておきます。

 

スポンサーリンク

■cssのみの画像のロールオーバーの表現

全て「img」や「a:hover img」やその他数値などは任意で変更してご利用下さい。

cssロールオーバー表現のss

デモはこちら

  1. 画像を透過
    a:hover img{
    	opacity:0.7;
    	filter:alpha(opacity=70);
    	-ms-filter: “alpha( opacity=70 )”;
    	-moz-opacity:0.7;
    }

     

  2. 画像の枠色を変化
    a img {
        border: 4px outset #808080;
    }
    
    a:hover img {
        border: 4px outset #FF6E6E;
    }

     

  3. 画像をずらす
    a:hover img {
    position:relative;
    top:2px;
    left:2px;
    }

     

  4. 画像をゆっくり透過
    img {
      transition: 0.5s;
    }
    
    a:hover img {
      opacity: 0.7;
      transition: 0.7s;
    }

     

  5. 画像を回転させる
    img {
      transition: 0.5s;
    }
    a:hover img {
      -moz-transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
    }

     

いつも私は透過ばっかりだったので、もうこういう所にも気を配っていきたいところですね。
今回は普通に表示する画像のロールオーバーの表現でしたが、ボタンやテキストなどになるとまた変わってくると思います。


何か質問、誤情報、誤字などがあればコメントでお願いします。

コメント

タイトルとURLをコピーしました