HTML・CSS

簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） 画像モーダル拡大 CSS グラデーション ジェネレーター 画像モーダル拡大 &lt;a class="mbig" href="">&lt;img src="●●●●.jpg" alt="" style="width:300px;" />&lt;/a> &lt;div class="modal"> &lt;div class="bigimg">&lt;img src="" alt="">&lt;/div> &lt;p class="close-btn">&lt;a href="">✖&lt;/a>&lt;/p> &lt;/div> CSS /* モーダル画像の拡大 */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); display: none; z-index:9999; } .bigimg { position: absolute; width: 80%; max-width: 800px; top: 80px; left: 0; right: 0; margin-right: auto; margin-left: auto; } .close-btn { color: #fff; font-size: 40px; position: absolute; right: 20px; top: 0; } .close-btn a { color: #fff; text-decoration: none; } JS &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">&lt;/script> &lt;script> $(function() { $('a.mbig').click(function() { var imgSrc = $(this).children().attr('src'); $('.bigimg').children().attr('src', imgSrc); $('.modal').fadeIn(); $('body,html').css('overflow-y', 'hidden'); return false }); $('.close-btn').click(function() { $('.modal').fadeOut(); $('body,html').css('overflow-y', 'visible'); return false }); }); &lt;/script>