【コピペ一発】はてなブログでマウスオーバーした時に画像を浮かせる方法

移転しました。

画像と背景をもっとしっかりと明確にしたいという事ありませんか？ 

（例えば、白い画像に対して、画像も白い場合とか、画像があまり大きくない画像の時。）

画像を浮かび上がらせたいと考えました。

そんな時は、下記のコードを

ダッシュボード→デザイン→カスタマイズ→デザインCSS

上記に貼り付けてください。

.entry-content img {

max-width: 100%; box-shadow: 0 0;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.entry-content img:hover {

box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.2);

-webkit-transform: scale(1.01);

transform: scale(1.01);

-webkit-transition: all 0.3s; transition: all 0.3s;

}

 試しに下記の画像にマウスオーバーしてみてください。

結構かっこよく出来ました。

いかがでしょうか？

ぜひ、やってみて下さい。