- ベストアンサー
画像がフェードインしてからフェードアウトする
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。
- JackTheRipper99
- お礼率89% (557/624)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
>何故か画像がフェードアウトして表示されません。 .fadein { opacity : 0; ←これ } 初期クラスがこれなので、それであってます。 次にスクロールしたら何か？って処理を書いているのが わかりましたが。 $(function(){ $(window).scroll(function (){ //略 }); }); </script> 表示物が少なすぎてスクロールバーが出てませんので、 無理に下に、ゴミを追加するとリスナ反応しましたよ。 <div style="height:1000px"></div> で、座標の計算恐らくミスってると思うので、 がんばってくださいな～ 私の方の回答としてはそこじゃなくて <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> こっち。 フェードしてるのが、liタグそのものになってしまうので、 <li class="grid__item"> <div class=f> <img src="sdfsafasfas.png"></div> ←通常の絵 <div class=b> <img src="sdfsafasfas.png"></div> ←薄い絵 </li> として、.grid__item .f をフェードさせては？ liをrelative基準にfとbはabsolute指定で、同一座標で出すとか。 または、CSSエフェクタでの画像処理などもいいかも。 liそのものでやっちゃうと、反応しない時何も見えない！ って感じで。 （今回スクロールに反応させようとしてたわけですが、 画面の外なら、「そもそも別に出てても出てなくてもいいやん」 って事も言えるので。。） タグ::hover 属性で、マウスフォーカスに反応するとかも ありかもですね。今のソース、ヒットしたら全部に反応してるので、 マウスに反応させたらそれもありかなと！感じたので。 --以下別件-- CSSは投稿の時は内包でおねが～い <link rel="stylesheet" href="style.css"> これじゃなくて、 <style> body {~~~ JQも、CDNで、おねが～い！
関連するQ&A
- masonry.jsで並べた画像を綺麗に敷き詰める
こんにちは、お世話になります。 大分レイアウト、アニメーションのjsの仕組みを理解してきたんですが masonry.jsはまだちょっと解りません。 これを使ってサイトいっぱいに画像を敷き詰めるにはどのような記述を追加すればよいでしょうか？ ご教示お願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } $grid.infiniteScroll({ path: getPath, append: '.grid__item', outlayer: msnry, scrollThreshold: 40, hideNav: '.pagination', status: '.page-load-status', }); }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="300"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="320"></li> <li class="grid__item"><img src="sdfsafasfas.png" alt="" width="300" height="360"></li> </ul> <div class="page-load-status"> <p class="infinite-scroll-request"> <i class="fa fa-spinner fa-spin"></i>Loading... </p> <p class="infinite-scroll-last">End of content</p> <p class="infinite-scroll-error">No more pages to load</p> </div> <div class="pagination"> <a href="page2.html" class="pagination__next">もっと見る</a> </div> </body> </html> CSS--------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid.are-images-unloaded .image-grid__item { opacity: 0; } .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .page-load-status { display: none; /* hidden by default */
- ベストアンサー
- CSS
- Firefoxとクロームでフェードインにならない
横並びの画像を3枚時間差でフェードイン（左から順に表示）させたいのですが、 ＩＥでは問題無く動くのですがFirefoxとGoogle Chromeではフェードインにも透過にもならず画像がそのままパっとでてしまいます・・。 FirefoxとGoogle Chrome対策ソース、他に良い方法などございましたら ご教授いただけますでしょうか。宜しくお願いいたします！ <script type="text/JavaScript"> // 画像のフェードイン・フェードアウト var myspd = 5; // 変化する速さ（ミリ秒単位） var myx = 10; // 何%ずつ変化させるか var mypic = new Array("px1","px2","px3"); // 画像のname（順番に並べる） var mycnt = 0; var myp = 0; function mygo() { document.images[mypic[myp]].filters['alpha'].opacity = mycnt; mycnt += myx; if(mycnt >= 100) { mycnt = 0; myp++; } if(mypic.length <= myp) return; setTimeout("mygo()",myspd); } </script> 【ＨＴＭＬ】 <ul> <li><img src="image/mainpx_01.jpg" name="px1" width="365" height="484" style="display: inline; filter:alpha(opacity=2);" /></li> <li><img src="image/mainpx_02.jpg" name="px2" width="365" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> <li><img src="image/mainpx_03.gif" name="px3" width="270" height="484" style="display: inline; filter:alpha(opacity=0);" /></li> </ul>
- 締切済み
- JavaScript
- 3枚の画像をフェードイン
3枚の画像を順番にフェードインさせたいのですが、ＩＥで確認すると先にパっと画像が表示された後にすぐにその画像が消えてフェードインが次々始まります・・・。何かソース等ミスがあるのかＩＥ対策をしないといけないのかわかりません・・。ページを表示させたあと更新を押すと正常に動くのですがブラウザを閉じて再度表示させるとまたパっと画像が現れた後にフェードインが始まる感じです。 ソースは下記になります。 最初のパッと画像が現れる原因と対策を教えてください・・・！ <script type="text/javascript"> $(function(){ $('#fade li').hide(); }); $(window).bind("load", function(){ var interval = 400; //表示間隔 for(var i=0; i<$('#fade li').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('#fade li').eq(i).fadeIn(2000); }; } }); </script> 【ＨＴＭＬ】 <ul id="fade"> <li><img src="image/mainpx_01.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_02.jpg" alt="" width="365" height="484" style="display: inline; " /></li><li><img src="image/mainpx_03.gif" alt="" width="270" height="484" style="display: inline; " /></li></ul>
- 締切済み
- JavaScript
- 画像のフェードイン・フェードアウト
現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- JavaScript
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- 画像スライダーをやってますが
<script type="text/javascript"> <!-- $(function(){ var sty=$("#s1"); sty.each(function(){ var mo1=$(this); var mo2=mo1.find("ul"); var mo3=mo1.find("li"); var mo4=mo1.find("li:first"); mo3.css({display:"block",opacity:"0",zIndex:"1"}); mo4.css({zIndex:"2"}).stop().animate({opacity:"1"},3500); setInterval(function(){ mo2.find('li:first-child').animate({opacity:'0'},1500).next('li').css({zIndex:'100'}).animate({opacity:'1'},1500).end().appendTo(mo2).css({zIndex:'99'}); },5000); }); }); --> </script> </head> <body> <div id="s1"> <ul> <li><img src="rtp/7.jpg" width="300px" height="300px"></li> <li><img src="rtp/9.jpg" width="300px" height="300px"></li> <li><img src="rtp/10.jpg" width="300px" height="300px"></li> </ul> </div> </body> </html> 見よう見まねで成功はしましたが、見真似なのでどういう構造なのか勉強しているところです。 今日は前半をなんとかやったんですが mo3.css({display:"block",opacity:"0",zIndex:"1"}); の部分のdisplay:"block"はなぜやっているのかが解りませんでした。 最初の設定は画像を消すところだと思うのですが、だとするとなぜblockなのかが解りません。
- ベストアンサー
- JavaScript
- 【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
- 画像を右下から詰めて表示したい
画像を、テーブルを使わずに右下から詰めて表示したいのですが方法がわかりません。 少し歪ですが、下のようにしたいのです。中抜きの四角（□）の方向に随時増えていく予定です。 ←□■■ ■■■■■■■■ ■■■■■■■■ ■■■■■■■■ ←ここからスタート htmlとcssは次のように書いてみたのですが、そうすると上から詰めているような かんじになってしまいました。あまり詳しくないのですが、そもそもリストで表示しようとするのが いけないのでしょうか…？どなたかよろしくお願いいたします。 <ul> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> <li><img src="icon.png" width="15px" height="13px" alt=""></li> </ul> ul{ list-style:none; text-align:center; } li{ width:21px; height:17px; float:right; }
- ベストアンサー
- HTML
- 画像のフェードインについて・・・。
現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- ベストアンサー
- その他([技術者向] コンピューター)
- 画像のフェードインについて・・・。
以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->
- 締切済み
- JavaScript
お礼
回答ありがとうございます。 すみません、実は言い忘れていたんですが masonry.jsも使っているので masonry.jsは<li class="grid__item">のgrid_itemで使っています。 なのでこれを使わないと画像に効果が付与されなくなるかも知れません。
補足
あ、すいません、入ってましたね（笑