Card effect

card-effect.markdown

Card effect

A Pen by Alex Moore on CodePen.

License.

index.html

<div class="slider">
  <div class="items-group">
    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hi</h2>
          <p>I`m cool card</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hi</h2>
          <p>I`m cool card</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hi</h2>
          <p>I`m cool card</p>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="block">
        <span class="circleLight"></span>
        <div class="text">
          <h2>Hi</h2>
          <p>I`m cool card</p>
        </div>
      </div>
    </div>
  </div>

  <div class="navigations">
    <ul class="dots"></ul>
  </div>
</div>

script.js

var mouse = {
      X   : 0,
      Y   : 0,
      CX  : 0,
      CY  : 0
    },
    block = {
      X   : mouse.X,
      Y   : mouse.Y,
      CX  : mouse.CX,
      CY  : mouse.CY
    },
    imags = [
      'https://images.pexels.com/photos/39811/pexels-photo-39811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
      'https://images.pexels.com/photos/210546/pexels-photo-210546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
      'https://images.pexels.com/photos/203319/pexels-photo-203319.jpeg?w=940&h=650&auto=compress&cs=tinysrgb',
      'https://images.pexels.com/photos/30361/pexels-photo-30361.jpg?w=940&h=650&auto=compress&cs=tinysrgb'
    ];

$('.block').on('mousemove', function(e) {
  mouse.X   = (e.pageX - $(this).offset().left) - $('.block').width() / 2;
  mouse.Y   = (e.pageY - $(this).offset().top) - $('.block').height() / 2;
})

$('.block').on('mouseleave', function(e) {
  mouse.X   = mouse.CX;
  mouse.Y   = mouse.CY;
})

setInterval(function(){

  block.CY   += (mouse.Y - block.CY) / 12;
  block.CX   += (mouse.X - block.CX) / 12;

  $('.block .circleLight').css('background', 'radial-gradient(circle at ' + mouse.X + 'px ' + mouse.Y + 'px, #fff, transparent)')
  $('.block').css({
    transform : 'scale(1.03) translate(' + (block.CX * 0.05) + 'px, ' + (block.CY * 0.05) + 'px) rotateX(' + (block.CY * 0.05) + 'deg) rotateY(' + (block.CX * 0.05) + 'deg)'
  })

}, 20);

$('.slider .item').each(function(i){
  
  if(i == 0){
    
    $(this).addClass('active');
    $(this).next().addClass('next');
    $(this).prev().addClass('prev');
  }
  
  $(this).attr('id', 'slide-'+i);
  
  $(this).prepend(
    $('<div>', {class: 'blur', style: 'background-image: url(' + imags[i] + ');'}),
    $('<div>', {class: 'bg', style: 'background-image: url(' + imags[i] + ');'})
  )
  
  $(this).find('.block').css('background-image', 'url(' + imags[i] + ')')
  
  $('.navigations .dots').append(
    $('<li>', {class: i == 0 ? 'active' : '', id: i}).on('click', function(){
    var cSlide = $('.slider #slide-'+$(this).attr('id'));
      
      $('.navigations .dots li').removeClass('active');
      $(this).addClass('active');
      
      $('.slider .item').removeClass('active prev next');
      cSlide.addClass('active');
      cSlide.next().addClass('next');
      cSlide.prev().addClass('prev');
    })
  )
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

.slider{
  width: 100%;
  height: 100vh;

  .items-group{
    width: 100%;
    height: 100%;
    position: relative;

    .item{
      top: 0px;
      left: 0px;
      opacity: 0;
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;
      transition: 0.5s;
      visibility: hidden;
      position: relative;
      padding: 50px 20px;
      position: absolute;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;

      &:hover{
        
        .bg{
          opacity: 0.2;
        }
        
        .block{
          box-shadow: 0px 0px 50px #333;
        }
      }

      &.active{
        opacity: 1;
        visibility: visible;
      }

      .bg{
        top: 0px;
        left: 0px;
        opacity: 1;
        z-index: -1;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        position: absolute;
        transform: scale(1.03);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
      }
      
      .blur{
        top: 0px;
        left: 0px;
        z-index: -1;
        width: 100%;
        height: 100%;
        transition: 0.5s;
        filter: blur(5px);
        position: absolute;
        transform: scale(1.03);
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
      }

      .block{
        width: 100%;
        height: 100%;
        padding: 20px;
        color: #ffffff;
        transition:box-shadow 0.5s;
        max-width: 300px;
        overflow: hidden;
        max-height: 450px;
        border-radius: 10px;
        transform: scale(1.03);
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        box-shadow: none;
        
        .circleLight{
          top: 0px;
          left: 0px;
          opacity: 0;
          content: '';
          width: 100%;
          height: 100%;
          display: block;
          transition: 0.5s;
          position: absolute;
          border-radius: 10px;
          background: radial-gradient(circle at 80px 40px, #fff, transparent);
        }
        
        .text{
          width: 100%;
          height: 100%;
          display: flex;
          text-align: center;
          flex-direction: column;
          justify-content: center;
          background-position: center;
          background-attachment: fixed;
        }
        
        h2{
          font-family: 'Oswald', sans-serif;
          font-size: 130px;
          margin-bottom: 0px;
        }
        
        p{
          font-family: 'Open Sans', sans-serif;
          font-size: 15px;
        }
        
        &:hover{
          box-shadow: 0px 0px 70px #111;
          
          .circleLight{
            opacity: 0.4;
          }
        }
      }
    }
  }

  .navigations{
    bottom: 0px;
    width: 100%;
    position: absolute;

    .dots{
      height: 20px;
      padding: 10px 0px;
      text-align: center;

      li{
        width: 10px;
        height: 10px;
        cursor: pointer;
        transition: 0.3s;
        background: #fff;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle;
        
        &+li{
          margin-left: 10px;
        }

        &:hover{
          filter: blur(2px);
        }

        &.active{
          width: 15px;
          height: 15px;
          
          &:hover{
            filter: blur(0px);
          }
        }
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet" />