SHIDEN DESIGN BLOG

thumnail_20170602

ホバーした画像を背景として画面全体に表示する方法

SponsorLink

タイトルのままなのですが、例えば、ブログで記事を一覧表示していてサムネイルにマウスオーバーしたり、ECサイトで商品画像にマウスオーバーしたりした際に、その画像を背景として表示させる方法です。
 

 
 
 

サンプルコード

 
 
 

 

 

 
 
 

解説

 
 
 
やっていることは至ってシンプルで、ホバーした画像のパスを取得して、それをbodyのbackground-imageに指定しています。
概ねコチラの記事でやっていることと同じです。
 
3行目でfind()を使用しているのはliタグの子要素でも孫要素でも所得できるようにするためです。これによりサンプルのhtmlではli > a > imgとなっていますが、リンクが必要なければaタグを省略したり、何か他の要素を付け加えることが可能になります。
 
CSSは、今更感漂うコードなので、特に説明することはないと思いますが、背景に使用する画像のサイズと位置を指定しているだけです。もちろんbodyじゃなくてsectionやdivに変えても問題ありません。
 
 

SponsorLink

Related Articles