サムネイル画像を単体でロールーバーすると上から、枠内で拡大、中段は縮小、下段は枠外オーバーで
拡大します。

 

取り付け手順は、サムネイルの下に画像コード配置HTML...画像コードのみ書き換え
次にCSSを置いてますのでコピーしてお使いください

 

仕様変更は数値変更で自己解釈願います

 

 

 

拡大

 

 

以下ＨＴＭＬ画像コード込ソースを記事内...好みの箇所に張り付けてから
シリウス機能で読み込む画像コードに書き換えてください
画像は4つ用意

 

<div id="fotogallery-1">
<div class="frame"><img src="<% pageDepth %>img/ksi1.png" alt="" /></div>
<div class="frame"><img src="<% pageDepth %>img/ksi2.png" alt="" /></div>
<div class="frame"><img src="<% pageDepth %>img/ksi3.png" alt="" /></div>
<div class="frame"><img src="<% pageDepth %>img/ksi4png" alt="" /></div>
</div>

 

 

次はスタイルシートでＣＳＳを追加します

 

.frame {
width: 150px;
height: 85px;
float: left;
margin-right: 5px;
overflow: hidden;
}
.frame img {
max-width:200% !important;
width: 150px;
height: 85px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.frame img:hover {
width: 250px;
height: 141px;
margin-top: -28px;
margin-left: -50px;
}

 

ここまで...

 

---

 

次は縮小へ進みます

 

縮小

 

 

 

htmlソース

 

<div id="fotogallery-1">
<div class="frame2"><img src="<% pageDepth %>img/kabesi1.png" alt="" /></div>
<div class="frame2"><img src="<% pageDepth %>img/kabesi2.png" alt="" /></div>
<div class="frame2"><img src="<% pageDepth %>img/kabesi3.png" alt="" /></div>
<div class="frame2"><img src="<% pageDepth %>img/kabesi4.png" alt="" /></div>
</div>

 

 

CSS

 

.frame2 {
width: 150px;
height: 85px;
float: left;
margin-right: 5px;
overflow: hidden;
}
.frame2 img {
max-width:200% !important;
width: 250px;
height: 141px;
margin-top: -28px;
margin-left: -50px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
.frame2 img:hover {
width: 150px;
height: 85px;
margin-top: 0;
margin-left: 0;
}

 

---

 

ご注意
以下は、枠外飛び出しですが、スマホ画面で見ると作動はするもののあまり用効果が得られません

 

パソコンの画面を狭めてご確認ください
...パソコンだけで表示させ、スマートフォンでは表示させないという場合は、CSSにdisplay: none;を
追加すれば切り替えが可能です...巻末に追記...

 

枠外飛び出し..横押しやり

 

htmlソース

 

<div id="fotogallery-3">
<div class="frame3"><img src="<% pageDepth %>img/foto1.png" alt="" /></div>
<div class="frame3"><img src="<% pageDepth %>img/foto2.png" alt="" /></div>
<div class="frame3"><img src="<% pageDepth %>img/foto3.png" alt="" /></div>
<div class="frame3"><img src="<% pageDepth %>img/foto4.png" alt="" /></div>
</div>

 

CSS

 

.frame3 img {
width: 150px;
height: 85px;
border: 0;
float: left;
margin-right: 5px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
}
#fotogallery-3:hover div img {
width: 116px;
}
#fotogallery-3:hover > div:hover img {
width: 250px;
height: 140px;
margin-top: -56px;
}

 

 

スマートフォンでは表示させない...ただし、レスポンシブTPに対応限定

 

 

@media screen and (max-width: 640px) {

 

.frame3 img {
width: 150px;
height: 85px;
border: 0;
float: left;
margin-right: 5px;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
　　display: none;
}
#fotogallery-3:hover div img {
width: 116px;
　　display: none;
}
#fotogallery-3:hover > div:hover img {
width: 250px;
height: 140px;
margin-top: -56px;
　　display: none;
}

 

ここまで...

 

---

 

サムネイル画像のロールオーバー効果3例
CSS形成サムネイルギャラリーカスタマイズまとめ
トップページ