Image Galery - for mod rotation

image-galery.markdown

Image Galery

A Pen by Widyatmoko on CodePen.

License.

index.html

<div class ="container">
  
  <div class="desc">
    <div class="tittle">
      <h1 class="judul">This is galery</h1>
      <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit,Lorem ipsum dolor sit amet, consectetur adipiscing elit,Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
    </div>
    
    <div class="imgsrc">
       <img src="https://images.unsplash.com/photo-1529563021893-cc83c992d75d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="prev">
    </div>
  </div>
  
  <div class="thumbnail">
    <img src="https://images.unsplash.com/photo-1529563021893-cc83c992d75d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
    <img src="https://images.unsplash.com/photo-1512895356176-c49e710676ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
    <img src="https://images.unsplash.com/photo-1518731683836-4e9cce00ba49?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
    <img src="https://images.unsplash.com/photo-1554205163-2b386a29d718?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
    <img src="https://images.unsplash.com/photo-1449480881392-716d0ea24a47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
    <img src="https://images.unsplash.com/photo-1523539693385-e5e891eb4465?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="thumb">
    
  </div>
</div>

script.js

const container = document.querySelector('.container');
const preview = document.querySelector('.prev')
const active = document.querySelectorAll('.thumb');


container.addEventListener('click', function(e){
  
  if( e.target.className == 'thumb' ){
    preview.src= e.target.src;
    preview.classList.add('effect');
    
    setTimeout(function(){
      preview.classList.remove('effect');
    }, 100)
    
    active.forEach(function(thumb){
      if (thumb.classList.contains('active')){
        thumb.classList.remove('active');
      }
    });
    
    e.target.classList.add('active');
  }
  
});

style.scss

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  text-align:center;
  background-color:beige;
  font-family: 'Poppins', sans-serif;

}

.container{
  margin:3em auto;
  width:610px;
  border:solid white 5px;
  border-radius:30px;
  box-shadow:5px 5px 25px rgba(0,0,0, .5);
  overflow:hidden;

  .thumbnail{
    display:flex;
    flex-wrap:wrap;
    
    .thumb{
      height:200px;
      width:200px;
      transition:all .2s;
      object-fit:cover;
      cursor:pointer;
      &:hover{
        box-shadow: 3px 3px 20px ;
        opacity:.8;
      }
    }
  }
}

  .desc{  
    position:relative;
    width:600px;
    height:400px;
    overflow:hidden;
   
    &:hover .judul{
      transform:translateY(80px);
    }
    
    &:hover .tittle{
       background: linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 70%, rgba(0,0,0,.8) 100%);
      opacity:1;
    }
    
    &:hover .text{
      transform:translateY(-150px);
    }
    .prev{
        object-fit:cover;
        width:600px;
        height:400px;
    }
    .tittle{
      margin:auto;
      overflow:hidden;
      width:100%;
      height:100%;
      position:absolute;
      transition:all .3s ease;
      opacity:0;
      display:flex;
      flex-direction:column;

      .judul{
        color:white;
        padding:20px;
        margin-top:-40px;
        transition:all .3s ease;
        
      }
      
      .text{
        color:white;
        margin-top:350px;
        padding:20px;
        transition:all .35s ease .4s ;
      }
    }
  }

@keyframes fade {
  to {
    opacity:1;
  }
}

.effect {
  opacity:0;
  animation: fade .2s forwards;
}

.active{
  opacity:.5;
}