Web Tips!!!

普段は、SEO対策でWebマーケティングをしている人が、睡眠、引越し、不動産、ミステリーについて記事をまとめたサイト

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

f:id:amber_owl:20170929024849j:plain

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

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

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

 

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

ダッシュボード→デザイン→カスタマイズ→デザイン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;

}

 

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

 

f:id:amber_owl:20170929024849j:plain

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

 

いかがでしょうか?

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