• MENU●●●●
  • サムネイル画像のロールオーバー効果を3例


    シリウスカスタマイズ アコーディオンブラインドメニューシリウスへ取り付け完了 詳細は外部カスタマイズメニューでご覧ください

    スポンサー広告

    関連記事


    横並びサムネイルの作動と効果3例

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

     

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

     

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

     

     

     

    拡大

     

     

    以下HTML画像コード込ソースを記事内...好みの箇所に張り付けてから
    シリウス機能で読み込む画像コードに書き換えてください
    画像は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>

     

     

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

     

    .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形成サムネイルギャラリーカスタマイズまとめ
    トップページ

    サムネイル画像のロールオーバー効果3例関連解説
    横回転型サムネイルギャラりーCSS指定方法
    横に6角クリスタルスタイルで回転するサムネイル 画像ギャラリーは、いい画像取り込めば面白い..
    折り込み収納から順送りでセンター表示するサムネイル画像
    折り込まれる収納位置から順送りでセンター表示する変わり種サムネイル画像の取り付け手順