Tag: HTML5

3D Animated Hover Effect Of Thumbnails Images

new-blog-addweb_2
This is a custom 3D animated effects for thumbnails images, grid box & card rotate design.
You can use below code for 3D Animation hover effect of images without using any jQuery code and JS libraries.
Feature
  • Browser compatible css
  • Responsive for mobile & i-pad
  • Need not to use any external js, script and libraries
  • SCSS & CSS both codes are available
  • Easy to use
How To Create a 3D Animation hover Effect of Thumbnails Images
Step 1: Manage HTML structure
HTML: Please use below HTML code
<div class="aws-image-thumbnail">
     <a href="#"></a>
      <span>Addweb Solution</span>
 </div>
Step 2: Use below SCSS code
SASS:
.aws-image-thumbnail {
  display: inline-block;
  float: left;
  height: 200px;
  width: 400px;
  margin: 0 0 100px;
  text-align: center;
  -webkit-perspective: 500px;
       -moz-perspective: 500px;
            perspective: 500px;
  span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: $white;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(.9);
       -moz-transform: rotateX(-80deg) scale(.9);
            transform: rotateX(-80deg) scale(.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
  }
  a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/img6.jpg');
    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all .5s;
         -moz-transition: all .5s;
              transition: all .5s;
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 36px;
      width: 100%;
      background: inherit;
      background-size: cover, cover;
      background-position: bottom;
      -webkit-transform: rotateX(90deg);
         -moz-transform: rotateX(90deg);
              transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
              transition: all 0.5s;
      opacity: 0.15;
      -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
         -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
              transform: rotateX(95deg) translateZ(-80px) scale(0.75);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
  }
  &:hover {
    a {
     -webkit-transform: rotateX(79deg);
        -moz-transform: rotateX(79deg);
             transform: rotateX(79deg);
     -webkit-transform-origin: bottom;
        -moz-transform-origin: bottom;
             transform-origin: bottom;
     &:after {
       display: inline-block;
       color: $white;
       -webkit-transform: rotateX(99deg);
          -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
       transform-origin: bottom;
     }
     &:before {
     -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
             box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
     opacity: 1;
     -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
        -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
             transform: rotateX(0) translateZ(-60px) scale(0.85);
     }
    }
    span {
     visibility: visible;
     opacity: 1;
     -webkit-transform: rotateX(0) scale(1.2);
        -moz-transform: rotateX(0) scale(1.2);
             transform: rotateX(0) scale(1.2);
     -webkit-transition: all .8s;
      -moz-transition: all .8s;
           transition: all .8s;
    }
  }
}
CSS:
.aws-image-thumbnail {
    display: inline-block;
    float: left;
    height: 200px;
    width: 400px;
    margin: 0 0 100px;
    text-align: center;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
         perspective: 500px;
  }
  .aws-image-thumbnail span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(0.9);
       -moz-transform: rotateX(-80deg) scale(0.9);
                transform: rotateX(-80deg) scale(0.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
                transition: all .5s ease 0s;
  }
  .aws-image-thumbnail a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/img6.jpg");    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
               transform-style: preserve-3d;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
               transition: all .5s;
  }
  .aws-image-thumbnail a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 36px;
    width: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
                transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail a:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
                transition: all 0.5s;
    opacity: 0.15;
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
       -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
                transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail:hover a {
    -webkit-transform: rotateX(79deg);
       -moz-transform: rotateX(79deg);
                transform: rotateX(79deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:after {
    display: inline-block;
    color: #FFF;
    -webkit-transform: rotateX(99deg);
       -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
    transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:before {
    -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 1;
    -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
       -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
                transform: rotateX(0) translateZ(-60px) scale(0.85);
  }
  .aws-image-thumbnail:hover span {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0) scale(1.2);
       -moz-transform: rotateX(0) scale(1.2);
                transform: rotateX(0) scale(1.2);
    -webkit-transition: all .8s;
       -moz-transition: all .8s;
    transition: all .8s;
  }
Hope this helps you to make things work..!!! Need more assistance regarding Web design service…! Feel free to leave your valuable feedback and stay tuned for more similar blogs.

Create Sliders To Move In Opposite Direction With Each Other

This is a custom animated slider with left & right offset slide effect. Animated effect like opening/closing door effects.
This slider can be used in testimonial, display 2 items in a slide, simple content & image slider and more.
Feature
  • Support in responsive view, tablet & mobile views
  • Support fluid responsive width
  • Content & images can slide
  • Compatible with IE 9 and higher
  • No need to add other dependences of CSS/JS
  • jQuery library: 1.4 and higher
  • Easy to use
HTML: Please use below HTML code:
<div class="aws-slider">
  <div class="aws-controls">
    <a class="aws-prev-link hide-arrow" href="javascript:void();"> 
        <img src="image-path"> <!-- prev icon -->
     </a>
    <a class="aws-next-link" href="javascript:void();”>
        <img src="image-path"> <!-- Next icon -->
    </a>
  </div> <!-- /.aws-controls -->
  <div class="aws-grid">
    <!-- Slide content wrapper div -->
    <div class="aws-row aws-row-1">
      <div class="aws-col aws-col-1">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div>
      </div> <!-- /.aws-col -->
      <div class="aws-col aws-col-2">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div> 
      </div> <!-- /.aws-col -->
    </div> <!-- /.aws-row -->
    ...
    ...
  </div> <!-- /.aws-grid -->
</div> <!-- /.aws-slider -->
JS: Use below code for animation effect for desktop and mobile device.
jQuery(document).ready(function() {
  var window_width = jQuery(window).width();

  jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
  
  // Animate slide for Desktop & Mobile
  slider_desktop ();
  slider_mobile ();

  jQuery(window).resize(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      jQuery('.aws-slider .aws-row.active .aws-col').removeClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
    else if (window_width < 768) {
      //slider_mobile (window_width);
      jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
  });
  // End

  // Set height for Col FOR DESKTOP
  if (jQuery(window).width() > 767) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }

  // Set height for Col FOR MOBILE
  if (window_width < 768) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }
});

// For Desktop
function slider_desktop () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row.active').is(':first-child')) {
        // To detect first row
      }
      else if (jQuery('.aws-slider .aws-row:nth-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row:nth-last-child(1)').hasClass('active')) {
        // To detect last row
      }
      else if (jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
    }
  });
}
// For Mobile
function slider_mobile () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  jQuery('.aws-slider .aws-row:nth-child(1) .aws-col-1').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
      if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').prev().addClass('active');
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-slider .aws-row:first-child').addClass('active');
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').prev().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-2').addClass('active');
        }
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if(jQuery('.aws-slider .aws-row:last-child .aws-col').length == '2' && jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row.active .aws-col-2').length) {
          jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
          jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').next().addClass('active');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:last-child .aws-col').length == '1' && jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          // To detect last row
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').next().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');
        }
      }
    }
  });
}
CSS:
.aws-slider .aws-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  margin: 0 0 0 -30px;
}
.aws-slider .aws-controls a {
  display: inline-block;
  height: 23px;
  width: 30px;
  text-align: center;
}
.aws-slider .aws-controls a.hide-arrow {
  opacity: .3;
}
@media (max-width: 767px) {
  .aws-slider .aws-controls {
    right: 0;
    left: 0;
    width: -webkit-calc('100% - 30px');
    width: -moz-calc('100% - 30px');
    width: calc('100% - 30px');
    margin: 0 15px;
  }
  .aws-slider .aws-controls a.aws-next-link {
    float: right;
  }
}

 

Hope this helped you a lot, feel free to share your feedbacks, Need more assistance regarding Quality Web Design Services Contact us now.
If you want to know how 3D Animation hover effect of images done without using any jQuery code and JS libraries click here