css transition – CodingNepal

Animated Loader in HTML & CSS

CodingNepal — Sun, 14 Nov 2021 21:11:19 +0000

Hello friends, as you know I have been creating a lot of JavaScript Projects, that’s why today I will create a Loader using HTML and CSS. I am sure you will love this loading animation.

Let’s have look at the given image of our program [Create a Loader in HTML & CSS], there are a total of 15 dots and they rotate at 360 deg with brighter and dimmer colors.

I have added smooth and beautiful animation. I highly recommend you to watch the real demo of this website loading animation or preloader. You will also get the idea, how all HTML and CSS codes work perfectly in this loading animation.

Animated Loader in HTML & CSS | Video Tutorial

You will get all the HTML and CSS code that I have used to create this loader or Preloader, before jumping into the source code, you need some important points to build this loading animation.

As you have seen on the video tutorial of creating loader or preloader for the website. All dots are blinking with different time intervals, which looks like they all are rotating at 360 deg. Also, you have seen, how I have created this beautiful loading animation using HTML and CSS.

I hope now you can create this type of loading animation easily, if you are feeling difficulty, don’t worry I have provided all the HTML & CSS source code below.

Loader or Pre-loader [Source Code]

To get the following HTML and CSS code for an Animated loader or preloader. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
      Website Loading Animation | CodingLab

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
section{
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #4070f4;
}
section .dots span{
  position: absolute;
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 50%;
  transform: rotate(calc(var(--i) * (360deg / 15))) translateY(35px);
  animation: animate 1.5s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);
  opacity: 0;
}
@keyframes animate {
 0%{
   opacity: 1;
 }
 100%{
   opacity: 0;
 }
}

Navigation Menu Hover Animation in HTML and CSS

CodingNepal — Sat, 24 Jul 2021 21:11:18 +0000

Hello friends, I hope you all doing well, today we will create all-important and mostly used hover animations for any type of navigation. As you already know that I have created various types of Responsive Navigation Bar and this type of tiny animation and effect makes our design far better right?

The animation that appears while hovering in the navigation links is known as navigation hover animation. Basically, these types of animation feel us that we have clicked or hovered on them.

As you can see on the given image of our program [all navigation menu hover animation], I know you are seeing only one underline under the navigation links and off course if is active for or hovered form. Basically, there are different types of menu animation on hover.

Let’s watch all the hover animation that I have built in this program[Navigation Menu Hover Animation], and one thing after watching the following video tutorial you will not see the demo of these hover animations, you will also know all code that I have used to create this hover animation and effect.

Navigation Menu Hover Animation in HTML and CSS

I have provided all source code of this all navigation menu hover animations and effects below, but before jumping on the source code files, I would like to cover some important points that you should know.

As you have seen on the video tutorial of all navigation menu bar hover animation and effect using HTML and CSS. At first, we have seen only navigation links, and when I did hover on those every navigation link’s beautiful and different underline animations appear with smooth animation.

In those first, second, and third navigation links I have given position absolute and that underline width increases while we hover on them. On the last navigation link, I have given width 100% and scaleX 0 and transform-origin right, and while we do hover I have given transform scaleX 1 and transform-origin right that’s why it moves forward.

I believe you have got all the ideas and tactics that I have used on this program [Navigation Menu Hover Animation in HTML and CSS] and you can build this type of animation easily but hose friends who are feeling difficult to make this, you can get all the source code of this hover animations from below.

Navigation Menu Hover Animation [Source Code]

Before copying the given code of Navigation Menu Hover Animation and Effects you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents.




  
    
    All Navigation Menu Hover Animation | CodingLab  
    
   

  
    Dashboard
    Portfolio
    Services
    Feedback

/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c1f7f5;
}
.nav-links{
  display: flex;
  align-items: center;
  background: #fff;
  padding: 20px 15px;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.nav-links li{
  list-style: none;
  margin: 0 12px;
}
.nav-links li a{
  position: relative;
  color: #333;
  font-size: 20px;
  font-weight: 500;
  padding: 6px 0;
  text-decoration: none;
}
.nav-links li a:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: #34efdf;
  border-radius: 12px;
  transition: all 0.4s ease;
}
.nav-links li a:hover:before{
  width: 100%;
}
.nav-links li.center a:before{
  left: 50%;
  transform: translateX(-50%);
}
.nav-links li.upward a:before{
  width: 100%;
  bottom: -5px;
  opacity: 0;
}
.nav-links li.upward a:hover:before{
  bottom: 0px;
  opacity: 1;
}
.nav-links li.forward a:before{
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}
.nav-links li.forward a:hover:before{
  transform: scaleX(1);
  transform-origin: left;
}

If you face any difficulties while creating your Navigation Menu Hover Animation or your code is not working as expected, you can download the source code files for this Navbar Menu Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Z-Index Transition on Image using CSS

CodingNepal — Sat, 20 Feb 2021 21:09:50 +0000

Hello Friends, today in this blog we will learn to create a Z-Index Transition on an Image using CSS. As you know, in my earlier blog I shared Animated Profile Card using HTML & CSS which you have liked very much considering the animated profile card, now I will going to create a z-index transition on the cards.

Z-Index is the property of CSS which is used to take forward specific elements on the web pages. It is the essential property of web designing to overlap or bring forward particular elements, cards, text, images, and so on.

As you can see in the given image of the program that we are going to build today. All the images are overlapping each other. The last image is only visible to us, and we can’t see others’ full images. I have provided a small image icon at the bottom side of every image denoting a small tooltip. Basically in this program, we can see all the images by hovering over that every particular image.

To see the real tutorial of this z index animation of this program, you can watch the full video tutorial that I have provided below. After watching the given tutorial you will get all ideas of the coding of this CSS hover animation with the z-index transition effect, and you will learn how that z-index transition works perfectly.

Full Video Tutorial of Z-Index Transition on Image using CSS

As you have seen in the given tutorial on z- index hover animation. At first, all the images are overlapping each other and we can see only the last images but when I hovered over every icon of the images hovered image smoothly moves right side and is visible properly then comes forward from all images then comes into its real position. I have given the same animation to all images. To make this program I used only CSS3.

If you are familiar with HTML & CSS then you can easily make this transition on the cards. Those friends who are feeling difficulty to built this z-index effect or transition, they can copy or download all source code files of this program which I have given below;

Z-Index Transition on Image [ Source Code ]




  
    
    Image Hover Animation HTML CSS | CodingNepal
    
  
  
    
      
        
          
        
        
          
            
          
          
            
              David Marloo
              Designer || Developer
            
          
        
      
      
        
          
        
        
          
            
          
          
            
              Lilly Carls
              Blogger || Designer
            
          
        
      
      
        
          
        
        
          
            
          
          
            
              Stephen Bald
              Designer || Developer
            
          
        
      
      
        
          
        
        
          
            
          
          
            
              Mike Tyson
              Photographer || Youtuber
            
          
        
      
      
        
          
        
        
          
            
          
          
            
              Emma Oliva
              Developer || Designer
            
          
        
      
      
        
          
        
        
          
            
          
          
            
              David Marloo
              Blogger || Youtuber

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0396FF;
}
.container{
  height: 500px;
  display: flex;
  min-width: 400px;
  align-items: flex-end;
  justify-content: center;
  margin-top: -55px;
}
.icon-image{
  position: relative;
  height: 70px;
  width: 70px;
  margin: 0 5px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  background: #fff;
}
.icon-image .icon img{
  position: absolute;
  height: 95%;
  width: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #0396FF;
}
.icon-image::before{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
}
.icon-image .hover-image{
  position: absolute;
  height: 350px;
  width: 300px;
  bottom: 100px;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  border-radius: 25px;
  pointer-events: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s ease, z-index 0s, left 0.5s ease ;
  transition-delay: 0s, 0.5s, 0.5s;
}
.icon-image:hover .hover-image{
  left: -200px;
  z-index: 12;
  transform: translateX(80px);
  transition: left 0.5s ease, z-index 0s, transform 0.5s ease;
  transition-delay: 0s, 0.5s, 0.5s;
}
.hover-image img{
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 25px;
}
.hover-image .content{
  position: absolute;
  width: 100%;
  bottom: -10px;
  padding: 0 10px;
}
.content::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #fff;
  left: 50%;
  bottom: -7px;
  transform: rotate(45deg) translateX(-50%);
  z-index: -1;
}
.content .details{
  position: relative;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}
.icon-image:hover .details{
  transition: all 0.5s ease;
  transition-delay: 0.9s;
  opacity: 1;
  transform: translateY(4px);
  pointer-events: auto;
}
.details::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #fff;
  left: 50%;
  bottom: -15px;
  transform: rotate(45deg) translateX(-50%);
  z-index: -1;
}
.content .details .name{
 font-size: 20px;
 font-weight: 500;
}
.content .details .job{
 font-size: 17px;
 color: #0396FF;
 margin: -3px 0 5px 0;
}
.content .details a:hover{
  color: #0396FF;
}
.container .last .hover-image{
  transition: none;
}
.container .last:hover .hover-image{
  transition: 0;
}
.last:hover .details{
  transition-delay: 0s;
}

If you face any difficulties while creating your Image Hover Animation or your code is not working as expected, you can download the source code files for this CSS Image Hover Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

css transition – CodingNepal

Animated Loader in HTML & CSS

Animated Loader in HTML & CSS | Video Tutorial

You Might Like This:

Loader or Pre-loader [Source Code]

Navigation Menu Hover Animation in HTML and CSS

Navigation Menu Hover Animation in HTML and CSS

You Might Like This:

Navigation Menu Hover Animation [Source Code]

Z-Index Transition on Image using CSS

Full Video Tutorial of Z-Index Transition on Image using CSS

You Might Like This:

Z-Index Transition on Image [ Source Code ]