Web Design Leaves

<div class="item">
  <div class="content"> 
    <img class="thumb" src="images/thumbs/01.jpg" alt="sample image 01">
    <div class="caption">
      <p>Title 1</p>
    </div>
  </div>
</div>

img {
  vertical-align: middle;
}
.item {
  max-width: 240px;
}
.content {
  position: relative;
  overflow: hidden;
}
.thumb {
  max-width: 100%;
  transition: transform 0.3s;
}
/* タッチまたはホバー時に適用するクラス */
.thumb-hover {
  transform: scale(1.1);
}
.caption {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 3rem;
  background-color: rgba(0,0,0,0.55);
  transform: translateY(3rem);
  transition: transform 0.3s;
  font-size: .875rem;
  color: #fff;
  pointer-events: none;
}
/* タッチまたはホバー時に適用するクラス */
.caption-hover {
  transform: translateY(0px);
}

//タッチデバイスかどうかの判定の値（初期値に false を設定）  
let hasTouchScreen = false;
if('ontouchstart' in window && navigator.maxTouchPoints > 0) {
  hasTouchScreen = true;
} 
//thumbs クラスを指定した要素を全て取得 
const thumbs = document.querySelectorAll('.thumb');
//caption クラスを指定した要素を全て取得 
const captions = document.querySelectorAll('.caption');
   
//デバイスの判定結果を元に要素にイベントを設定
for(let i=0; i<thumbs.length; i++) {
  //タッチデバイスの場合は touchstart と touchend イベントを設定
  if(hasTouchScreen) {
    thumbs[i].addEventListener('touchstart', (e) => {
      //マウスイベントなどが送信されないようにデフォルトの動作を停止
      e.preventDefault();
      //タッチしたら適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
    });
    //離れたらクラスを削除
    thumbs[i].addEventListener('touchend', () => {
      thumbs[i].classList.remove('thumb-hover');
      captions[i].classList.remove('caption-hover');
    });
  }else{ //タッチデバイス以外の場合は mouseenter と mouseleave イベントを設定
    thumbs[i].addEventListener('mouseenter', (e) => {
      //ホバー時に適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
    });
    thumbs[i].addEventListener('mouseleave', () => {
      //要素の外に出たらクラスを削除
      thumbs[i].classList.remove('thumb-hover');
      captions[i].classList.remove('caption-hover');
    });
  }
}

<div class="wrapper">
  <div class="grid">
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/01.jpg"> 
          <img class="thumb" src="images/thumbs/01.jpg" alt="sample image 01"> 
        </a>
        <span class="icon-plus"></span>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 1</a></h3>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/02.jpg"> 
          <img class="thumb" src="images/thumbs/02.jpg" alt="sample image 02"> 
        </a>
        <span class="icon-plus"></span>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 2</a></h3>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <a class="luminous" href="images/03.jpg"> 
          <img class="thumb" src="images/thumbs/03.jpg" alt="sample image 03"> 
        </a>
        <span class="icon-plus"></span>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 3</a></h3>
        </div>
      </div>
    </div>
  </div>
  <div id="link_target">target</div>
</div>

/*画像の下の余分なスペースができないように */
img {
  vertical-align: middle;
}
html {
  scroll-behavior: smooth;  /* iOS では機能しない */
}
.wrapper {
  padding: 1.5em;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.grid {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}
.grid-content {
  position: relative;
  overflow: hidden;
}
.thumb {
  max-width: 100%;
  transition: transform 0.3s;
}
/*画像ホバーに（またはタッチ）時に画像を拡大（JavaScript で追加）*/
.thumb-hover {
  transform: scale(1.1);
}
.caption {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 3rem;
  background-color: rgba(0,0,0,0.55);
  transform: translateY(3rem);
  transition: transform 0.3s;
  font-size: .875rem;
}
/*ホバー（またはタッチ）時にキャプションを表示（JavaScript で追加）*/
.caption-hover{
  transform: translateY(0px);
}
.link {
  color: #fff;
  transition: color 0.5s;
  text-decoration: none;
}
/*キャプションにホバー（またはタッチ）時にリンク色を変更（JavaScript で追加）*/
.link-hover {
  color: #0DD0F5;
}
#link_target {
  margin: 1500px 0;
}
/*ホバー時に画像の上に表示するアイコン*/ 
.icon-plus {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s;
  top: 50%; /* 水平垂直方向中央配置 */
  left: 50%; /* 水平垂直方向中央配置 */
  margin-right: -50%; /* 水平垂直方向中央配置 */
  transform: translate(-50%, -50%); /* 水平垂直方向中央配置 */
  pointer-events: none;
}
/*ホバー（またはタッチ）時にアイコンを表示*/
.icon-plus-hover {
  opacity: 1;
}
/*アイコンを疑似要素で表示する SVG*/
.icon-plus::after{
  display: inline-block;  
  margin: 0;  
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}  

/* luminous lightbox（ライトボックスのカスタマイズ設定） */
@media (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 160vw;
    max-height: 90vh;
  }
  .lum-lightbox-caption {
    position: relative;
  }
  .lum-close-button {
    opacity: 0.7;
    background: rgba(0,0,0,.8);
    border-radius: 50%;
  }
}

<script src="../luminous/luminous.min.js"></script><!-- ライトボックスの読み込み -->
<script>
//タッチデバイスかどうかの判定の値（初期値に false を設定）  
let hasTouchScreen = false;
if('ontouchstart' in window && navigator.maxTouchPoints > 0) {
  hasTouchScreen = true;
} 
//grid-item クラスを指定した要素を全て取得 
const items = document.querySelectorAll('.grid-item');
//thumbs クラスを指定した要素を全て取得 
const thumbs = document.querySelectorAll('.thumb');
//caption クラスを指定した要素を全て取得 
const captions = document.querySelectorAll('.caption');
//link クラスを指定した要素を全て取得 
const links = document.querySelectorAll('.link');
   
//デバイスの判定結果を元に要素にイベントを設定
for(let i=0; i<thumbs.length; i++) {
  //タッチデバイスの場合は touchstart と touchend イベントを設定
  if(hasTouchScreen) {
    //グリッドアイテム部分（画像を含む全体）に touchstart イベントを設定
    items[i].addEventListener('touchstart', (e) => {
      //デフォルトの動作は停止しない（以下を削除またはコメントアウト）
      //e.preventDefault(); //不要
      //全ての caption-hover クラスと icon-plus-hover クラスを削除して状態を戻す
      captions.forEach((elem) => {
        elem.classList.remove('caption-hover');
      });
      icons.forEach((elem) => {
        elem.classList.remove('icon-plus-hover');
      });
      //タッチしたら適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //キャプション部分
    captions[i].addEventListener('touchstart', (e) => {
      links[i].classList.add('link-hover');
    });
    //離れたらクラスを削除
    items[i].addEventListener('touchend', () => {
      thumbs[i].classList.remove('thumb-hover');
      //2秒後にキャプションとアイコンを表示するクラスを削除
      setTimeout(()=> {
        captions[i].classList.remove('caption-hover');
        icons[i].classList.remove('icon-plus-hover');
      }, 2000);
    });
    //キャプション部分
    captions[i].addEventListener('touchend', (e) => {
      links[i].classList.remove('link-hover');
    });
  }else{ //タッチデバイス以外の場合は mouseenter と mouseleave イベントを設定
    items[i].addEventListener('mouseenter', (e) => {
      //ホバー時に適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseenter', (e) => {
      //リンクにマウスオーバーしたら色を変更
      links[i].classList.add('link-hover');
    });
    items[i].addEventListener('mouseleave', () => {
      //要素の外に出たらクラスを削除
      thumbs[i].classList.remove('thumb-hover');
      captions[i].classList.remove('caption-hover');
      icons[i].classList.remove('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseleave', (e) => {
      //リンクから外れたら色を戻す
      links[i].classList.remove('link-hover');
    });
  }
}

//ライトボックスで img 要素の alt 属性の値をキャプションとして表示するためのオプション
const luminousOpts = {
  caption: (trigger) => {
    return trigger.querySelector('img').getAttribute('alt');
  },
}
//Luminous Lightbox の初期化
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 
</script>

<div class="wrapper">
  <div class="grid">
    <div class="grid-item">
      <div class="grid-content"> 
        <img class="thumb" src="images/thumbs/01.jpg" alt="sample image 01"> 
        <a class="luminous" href="images/01.jpg"> 
          <span class="icon-plus"></span>
        </a>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 1</a></h3>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <img class="thumb" src="images/thumbs/02.jpg" alt="sample image 02"> 
        <a class="luminous" href="images/02.jpg">
          <span class="icon-plus"></span>
        </a>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 2</a></h3>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-content"> 
        <img class="thumb" src="images/thumbs/03.jpg" alt="sample image 03"> 
        <a class="luminous" href="images/03.jpg"> 
          <span class="icon-plus"></span>
        </a>
        <div class="caption">
          <h3 class="title"><a class="link" href="#link_target">Link 3</a></h3>
        </div>
      </div>
    </div>
  </div>
  <div id="link_target">
    <p>target</p>
    <p><a href="#">to the top</a></p>
  </div>
</div>

//タッチデバイスかどうかの判定の値（初期値に false を設定）  
let hasTouchScreen = false;
if('ontouchstart' in window && navigator.maxTouchPoints > 0) {
  hasTouchScreen = true;
} 
//grid-item クラスを指定した要素を全て取得 
const items = document.querySelectorAll('.grid-item');
//thumbs クラスを指定した要素を全て取得 
const thumbs = document.querySelectorAll('.thumb');
//caption クラスを指定した要素を全て取得 
const captions = document.querySelectorAll('.caption');
//link クラスを指定した要素を全て取得 
const links = document.querySelectorAll('.link');
//icon-plus クラスを指定した要素を全て取得 
const icons = document.querySelectorAll('.icon-plus');
//タップ後他の要素をタップしない場合にキャプションとアイコンを表示し続ける長さ（ミリ秒）
const beforeRemoveClass = 3000;
   
//デバイスの判定結果を元に要素にイベントを設定
for(let i=0; i<thumbs.length; i++) {
  //タッチデバイスの場合は touchstart と touchend イベントを設定
  if(hasTouchScreen) {
    //画像要素に touchstart イベントを設定
    thumbs[i].addEventListener('touchstart', (e) => {
      //デフォルトの動作を停止
      e.preventDefault();
      //全ての caption-hover クラスを一度削除
      captions.forEach((elem) => {
        elem.classList.remove('caption-hover');
      });
      icons.forEach((elem) => {
        elem.classList.remove('icon-plus-hover');
      });
      //タッチしたら適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //キャプション部分
    captions[i].addEventListener('touchstart', (e) => {
      links[i].classList.add('link-hover');
    });
    //離れたらクラスを削除
    items[i].addEventListener('touchend', () => {
      thumbs[i].classList.remove('thumb-hover');
      //3秒（beforeRemoveClass）後にキャプションとアイコン、リンクのホバー時のクラスを削除
      setTimeout(()=> {
        captions[i].classList.remove('caption-hover');
        icons[i].classList.remove('icon-plus-hover');
        links[i].classList.remove('link-hover');
      }, beforeRemoveClass);
    });
    //キャプション部分
    captions[i].addEventListener('touchend', (e) => {
      links[i].classList.remove('link-hover');
    });
  }else{ //タッチデバイス以外の場合は mouseenter と mouseleave イベントを設定
    items[i].addEventListener('mouseenter', (e) => {
      //ホバー時に適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseenter', (e) => {
      //リンクにマウスオーバーしたら色を変更
      links[i].classList.add('link-hover');
    });
    items[i].addEventListener('mouseleave', () => {
      //要素の外に出たらクラスを削除
      thumbs[i].classList.remove('thumb-hover');
      captions[i].classList.remove('caption-hover');
      icons[i].classList.remove('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseleave', (e) => {
      //リンクから外れたら色を戻す
      links[i].classList.remove('link-hover');
    });
  }
}

//ライトボックスで img 要素の alt 属性の値をキャプションとして表示するためのオプション
const luminousOpts = {
  caption: (trigger) => {
    //trigger（a 要素）の親要素を parentElement で取得して img 要素を取得
    return trigger.parentElement.getElementsByTagName('img')[0].getAttribute('alt');
  },
}
//Luminous Lightbox の初期化
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
} 

*, *::before, *::after {
  box-sizing: border-box;
}
/*画像の下の余分なスペースができないように */
img {
  vertical-align: middle;
}
html {
  scroll-behavior: smooth;/*touch-action: manipulation;*/
}
.wrapper {
  padding: 1.5em;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
}
.grid {
  display: grid;
  column-gap: 1rem;
  row-gap: 2rem;
  grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}
.grid-item {
}
.grid-content {
  position: relative;
  overflow: hidden;
  /*画像ホバー時に画像を半透明にして暗くするための背景*/
  background-color: #000;
}
.thumb {
  max-width: 100%;
  transition: transform 0.3s, opacity 0.3s;
}
/*画像ホバー（またはタッチ）時に画像を拡大及び半透明に（JavaScript で追加）*/
.thumb-hover {
  transform: scale(1.1); 
  opacity: 0.8;
}
.caption {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 3rem;
  background-color: rgba(0,0,0,0.25);
  transform: translateY(3rem);
  transition: transform 0.3s;
  font-size: .875rem;
}
/*ホバー（またはタッチ）時にキャプションを表示（JavaScript で追加）*/
.caption-hover {
  transform: translateY(0px);
}
.link {
  color: #fff;
  transition: color 0.5s;
  text-decoration: none;
}
/*キャプションホバー（またはタッチ）時にリンク色を変更（JavaScript で追加）*/
.link-hover {
  color: #0DD0F5;
}
#link_target {
  margin: 1500px 0;
  width: 100%;
  height: 300px;
  background-color: #01944A;
  text-align: center;
  padding: 50px;
  font-size: 20px;
  color: #fff;
}
#link_target a {
  color: #E9F4C5;
  font-size: 16px;
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #fff;
}
/*ホバー時に画像の上に表示するアイコン*/ 
.icon-plus {
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);/*pointer-events: none;*/
  /*タッチできる範囲を大きめに*/
  padding: 20px;
}
/*ホバー（またはタッチ）時にアイコンを表示*/
.icon-plus-hover {
  opacity: 1;
}
.icon-plus::after {
  display: inline-block;
  margin: 0;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

/* luminous lightbox（ライトボックスのカスタマイズ設定） */
@media (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 160vw;
    max-height: 90vh;
  }
  .lum-lightbox-caption {
    position: relative;
  }
  .lum-close-button {
    opacity: 0.7;
    background: rgba(0,0,0,.8);
    border-radius: 50%;
  }
}

//タッチデバイスかどうかの判定の値（初期値に false を設定）  
let hasTouchScreen = false;
if('ontouchstart' in window && navigator.maxTouchPoints > 0) {
  hasTouchScreen = true;
} 
//grid-item クラスを指定した要素を全て取得 
const items = document.querySelectorAll('.grid-item');
//thumbs クラスを指定した要素を全て取得 
const thumbs = document.querySelectorAll('.thumb');
//caption クラスを指定した要素を全て取得 
const captions = document.querySelectorAll('.caption');
//link クラスを指定した要素を全て取得 
const links = document.querySelectorAll('.link');
//icon-plus クラスを指定した要素を全て取得 
const icons = document.querySelectorAll('.icon-plus');

//タップカウント（タップした回数）
let tapCount = 0;
//ダブルタップかどうかを判定するタップの間隔のミリ秒
const doubleTapThreshold = 500;
//タップ後他の要素をタップしない場合にキャプションとアイコンを表示し続ける長さ（ミリ秒）
const beforeRemoveClass = 5000;
   
//デバイスの判定結果を元に要素にイベントを設定
for(let i=0; i<thumbs.length; i++) {
  //タッチデバイスの場合は touchstart と touchend イベントを設定
  if(hasTouchScreen) {
    items[i].addEventListener('touchstart', (e) => {
      
      if (tapCount ===0) {
        // タップカウントを1増加
        ++tapCount;
        //doubleTapThreshold で指定した 500ms の間タップカウントを維持
        setTimeout(()=> {
          tapCount = 0;
        }, doubleTapThreshold);
        //デフォルトの動作を停止
        e.preventDefault();
      } else {
        //タップカウントをリセット
        tapCount = 0;
      }
      
      //全ての caption-hover クラスを一度削除
      captions.forEach((elem) => {
        elem.classList.remove('caption-hover');
      });
      icons.forEach((elem) => {
        elem.classList.remove('icon-plus-hover');
      });
      //タッチしたら適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //キャプション部分
    captions[i].addEventListener('touchstart', (e) => {
      links[i].classList.add('link-hover');
    });
    //離れたらクラスを削除
    items[i].addEventListener('touchend', () => {
      thumbs[i].classList.remove('thumb-hover');
      //5秒（beforeRemoveClass）後にキャプションとアイコンを表示するクラスを削除
      setTimeout(()=> {
        captions[i].classList.remove('caption-hover');
        icons[i].classList.remove('icon-plus-hover');
      }, beforeRemoveClass);
    });
    //キャプション部分
    captions[i].addEventListener('touchend', (e) => {
      links[i].classList.remove('link-hover');
    });
    //links[i].addEventListener('click' ()=>{});
  }else{ //タッチデバイス以外の場合は mouseenter と mouseleave イベントを設定
    items[i].addEventListener('mouseenter', (e) => {
      //ホバー時に適用するクラスを追加
      thumbs[i].classList.add('thumb-hover');
      captions[i].classList.add('caption-hover');
      icons[i].classList.add('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseenter', (e) => {
      //リンクにマウスオーバーしたら色を変更
      links[i].classList.add('link-hover');
    });
    items[i].addEventListener('mouseleave', () => {
      //要素の外に出たらクラスを削除
      thumbs[i].classList.remove('thumb-hover');
      captions[i].classList.remove('caption-hover');
      icons[i].classList.remove('icon-plus-hover');
    });
    //リンクにイベント
    links[i].addEventListener('mouseleave', (e) => {
      //リンクから外れたら色を戻す
      links[i].classList.remove('link-hover');
    });
  }
}

//ライトボックスで img 要素の alt 属性の値をキャプションとして表示するためのオプション
const luminousOpts = {
  caption: (trigger) => {
    return trigger.querySelector('img').getAttribute('alt');
  },
}
//Luminous Lightbox の初期化
const luminousGalleryElems = document.querySelectorAll('.luminous');
if( luminousGalleryElems.length > 0 ) {
  new LuminousGallery(luminousGalleryElems, {}, luminousOpts);
}