CSS Hover Animation – CodingNepal

How to Create Glassmorphism Sidebar in HTML and CSS

CodingNepal — Sat, 29 Jul 2023 18:18:15 +0000

As a beginner web developer, have you ever wondered how to create sidebars like the ones you’ve seen on websites or apps? With just HTML and CSS, you can build your own stylish sidebars with the trendy glassmorphism effect. This not only teaches you how to make popular UI components but also lets you apply the modern glassmorphism style to your designs.

If you’re unfamiliar, glassmorphism is a stylish design trend that creates transparency and frosted glass effects. This effect gives the elements a semi-transparent look, making the background and foreground blend smoothly.

In this blog post, we’ll show you how to create a stylish Glassmorphism Sidebar using only HTML and CSS. Not only will we apply the elegant glassmorphism effect to the sidebar, but we’ll also add an interactive hover animation.

Initially, the sidebar remained collapsed, showing only the icons of each link. But when we hover over the sidebar, it smoothly expands and reveals the respective logo’s link. This animation is done with pure CSS and HTML.

Steps To Create Glassmorphism Sidebar in HTML & CSS

To create a stylish Sidebar with a Glassmorphism effect using only HTML and CSS. Follow these simple, step-by-step instructions:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Download and place the Images folder in your project directory. This folder includes the sidebar logo and hero background image.

To start, add the following HTML codes to your index.html file to create your sidebar layout. These codes include the necessary Google icon links and other HTML elements like aside, div, ul, li, span, and a.




  
    
    
    Glassmorphism Sidebar HTML and CSS| CodingNepal
    
    
    
  
  
    
      
        
        CodingNepal
      
      
        Main Menu
        
          dashboard
          Dashboard
        
        
          show_chart
          Revenue
        
        
          flag
          Reports
        
        
        Advanced
        
          person
          Designer
        
        
          group
          Developer 
        
        
          ambient_screen
          Magic Build
        
        
          pacemaker
          Theme Maker
        
        
          monitoring
          Analytic
        
        
        Account
        
          bar_chart
          Overview
        
        
          mail
          Message
        
        
          settings
          Settings
        
        
          logout
          Logout

Next, add the following CSS codes to your style.css file to achieve a stylish and interactive glassmorphism design for our Sidebar. These codes include various styling properties like blur, color, background, background image, and more to create a transparent glass-like effect sidebar with a smooth hover animation.

/* Importing Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    width: 100%;
    background-image: url("images/hero-bg.jpg");
    background-position: center;
    background-size: cover;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(17px);
    --webkit-backdrop-filter: blur(17px);
    border-right: 1px solid rgba(255, 255, 255, 0.7);
    transition: width 0.3s ease;
}

.sidebar:hover {
    width: 260px;
}

.sidebar .logo {
    color: #000;
    display: flex;
    align-items: center;
    padding: 25px 10px 15px;
}

.logo img {
    width: 43px;
    border-radius: 50%;
}

.logo h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-left: 15px;
    display: none;
}

.sidebar:hover .logo h2 {
    display: block;
}

.sidebar .links {
    list-style: none;
    margin-top: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    height: calc(100% - 140px);
}

.sidebar .links::-webkit-scrollbar {
    display: none;
}

.links li {
    display: flex;
    border-radius: 4px;
    align-items: center;
}

.links li:hover {
    cursor: pointer;
    background: #fff;
}

.links h4 {
    color: #222;
    font-weight: 500;
    display: none;
    margin-bottom: 10px;
}

.sidebar:hover .links h4 {
    display: block;
}

.links hr {
    margin: 10px 8px;
    border: 1px solid #4c4c4c;
}

.sidebar:hover .links hr {
    border-color: transparent;
}

.links li span {
    padding: 12px 10px;
}

.links li a {
    padding: 10px;
    color: #000;
    display: none;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.sidebar:hover .links li a {
    display: block;
}

.links .logout-link {
    margin-top: 20px;
}

Conclusions and Final Words

Congratulations! You have successfully created a Glassmorphism Sidebar using only HTML and CSS by following these simple steps. This exercise not only enhances your knowledge to create popular UI components but also helps you to apply the trending glassmorphism style to your designs.

Feel free to experiment and customize the code to make your sidebar even more beautiful and functional. To further improve your HTML and CSS skills, why not try recreating other sidebar menu designs available on this website?

If you encounter any problems while creating your Glassmorphism Sidebar, you can download the source code files for this sidebar project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Input Label Animation in HTML & CSS

CodingNepal — Fri, 02 Dec 2022 21:11:21 +0000

When you come to fill out a form, you may have seen there is an amazing Floating Label Animation. If you are looking for a quick and easy way to create CSS Input Label Animation then this blog is written for you.

This blog will teach you how to create an Input Label Animation using HTML and CSS only. This type of animation typically appears when we click on an input field to enter some information. In my recent blog post, I have provided 10 Free Responsive Navigation Bar, which could also enhance your skills in HTML CSS as well as JavaScript.

The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.This method is much more space-saving than the conventional heading in front of a form field.

Have a quick look at the given image of my Input Label Animation. As you can see on this Floating Label Animationin the first input field there is an input box and inside it there is a label and you can see in the second input box that the label has gone up when the input box is in focus.

If you’re wondering how this input label animation truly works, take a look at the preview provided below. I have explained all the HTML and CSS code that I have used to create this Input Label Animation.

Input Label Animation in HTML & CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Floating Label Animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Input Label Animation. By watching the video tutorial, you can create this Input Label Animation.

As you have seen in the video tutorial of this Input Label Animation. Basically, it’s an input with a lot of CSS effects. As you have seen when I click inside it, the label goes up left, and when we write something on the input, label stays on top, but when we clear the input box, the label come to its original position.

Now, hopefully, you can create this Input Label Animation using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

Input Label Animation in HTML & CSS [Source Codes]

To create an Input Label Animation, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the an Input Label Animation by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
  Input Label Animaton | CoderGirl
  
  


  
     
    Enter email

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@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{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060b23;
}
.input-field{
  position: relative;
}
.input-field input{
   width: 350px;
  height: 60px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 15px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
}
.input-field label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 19px;
  pointer-events: none;
  transition: 0.3s;
}
input:focus{
  border: 2px solid #18ffff;
}
input:focus ~ label,
input:valid ~ label{
  top: 0;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: #060b23;
}

That’s all, now you’ve successfully created a project on an Input Label Animation. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Top 10 Best CSS Animation & Transition

CodingNepal — Fri, 25 Nov 2022 21:11:21 +0000

CSS (Cascading Style Sheets) has evolved into the most powerful markup language for creating website and application user interfaces and experiences. CSS enables us to create a variety of animations and transitions, along with styling the overlook of the webpage.

I’ve included over 10 CSS Animations and Transitions in this blog to help you overcome your HTML and CSS skills to the next level. I recently provided upwards of 16 Login & Registration Forms. I believe that you’ll find this blog useful as well.

CSS Animation and transition are HTML element transformations that happen when the webpage loads or when the user interacts with it by hovering or clicking. Some animation and transitions could take place for a short period of time, while others may happen over a lengthy time period.

Let’s get into our list of CSS Animation and Transition.

1. 3D Layer CSS Hover Animation on Social Media Buttons

Originally, those social media icons will be in a natural shape; however, while you hover over those social media buttons, the icons begin to animate into a 3D shape with a gradient color, as shown in the image.

This animation and transition has been made with HTML and CSS. You should definitely try to make this to understand better how CSS transformation works as well as what we can create with CSS transformation. The video tutorial and source code link are given below for this 3d CSS hover animation on the button

2. CSS Hover Animation Multiple Color Dots

Initially, there will be many dots that glow in multiple colors; when you move the cursor or move your cursor over them, they will expand in a smooth and beautiful animation. I used HTML and CSS to create this hover animation. I have used the CSS hue property to display multiple colors.

Here you will gain knowledge of how to use CSS animation, transition, and keyframes, as well as the hue property, in this animation and transition. The source code with the demo link for this Multiple Color Dots CSS animation is given below.

Demo and Source code

3. CSS Hover Animation Image Transition

When you hover over a small profile image circle, the relevant image card appears in front of you with a z-index transition. Similarly, when you extract the mouse pointer from it, the image card returns to its original position. I used HTML and CSS to create this Animation.

You will learn how to create animation with the CSS z-index property. You should try to create this animation to enhance your HTML and CSS skills. You can get the video tutorial and source code for this CSS hover animation on the image by visiting the provided link.

4. CSS Animation Heart Spinner

This is the heart-shaped spinner, which has been created using HTML and CSS. Basically, there will be a circle in that cyan color at first, and it will rotate into a heart shape before returning to the original; this action will continue indefinitely. I’ve also included an image, which you can see in the image.

To improve your HTML and CSS skills, try making this CSS animation with a heart spinner and a shadow. This animated heart shape spinner’s video tutorial and source code links are provided below.

5. CSS Animation Text Glitch Effect

The text glitch animation is shown here. The animation continues until the text appears to be glitched and then returns to its normal shape. I used HTML and CSS to create this animation.

It is a simple CSS animation with transition; if you are fresh to HTML CSS and want to create micro animation, you should try this text glitch animation. You can access the video tutorial and source code link for the text glitch animation below.

6. CSS Hover Animation on Button

When you hover over that gradient button, the colorful border button initiates to animate with a delightful gradient color. When you move your cursor away from that button, the animation stops.

Here, you will learn how to make a gradient button with hover animation in this CSS Hover Animation guide. Even if you are a complete beginner in HTML and CSS, you can make this CSS Hover Animation. Please see the links below for the source and video tutorial link for this button animation.

7. CSS Hover Animation Navigation Menu

Here you will find all four of the popular Navigation Hover Animations made from HTML and CSS. When you hover over the first link, the underline appears from the left and goes back when you let go of the mouse; similarly, the second underline appears from the middle, the third from the bottom, and the last from the left and proceeds to the end.

If you want to learn how to make navbar hover animations, you should definitely try making these navigation links hover animations and their transition. Please see the links below for the source code and video tutorial of this Navigation Link Hover Animation.

8. CSS Animation Skeleton Loading

Popular platforms such as Facebook and YouTube now make extensive use of Skeleton Loading animation. We see skeleton animation while the page is loading. This skeleton animation was created using HTML and CSS.

This is a beginner-friendly CSS Animation; you should try making this Modern Skeleton Loading Animation to improve your HTML and CSS skills. This Skeleton Loader’s source code and video tutorial link are provided below.

8. Simple CSS Animation Loading Spinner

This is a simple and useful Loading Spinner made in HTML and CSS. It keeps rotating, and the colors fade from the front ball to the end, making loading even more amazing.

If you are a newcomer and want to create a Loading Spinner with HTML and CSS, this CSS Animation could help you enhance your HTML and CSS skills. The links to the video tutorial and the source code for this Loading Spinner are provided below.

9. CSS Animation Glowing Gradient Media Icons

This is the CSS hover animation on buttons with different colors which is created in HTML and CSS. As you can see when I take the cursor on the social media icons it starts glowing with a beautiful color.

I hope you will try to make or get an idea for this CSS hover Animation. Below is a video tutorial as well as a link to the source code.

10. CSS Animation Skills Bar

When the page loads, all of the Skill Bar’s lines begin animating from right to left and stop according to their value. This Skills Bar and Animation and transition were created using HTML and CSS.

If you have a basic understanding of HTML and CSS, you should try making this CSS Animation of the Skills Bar. I’ve included all of the source code for this Animated Skills Bar as well as a video tutorial link below.

Conclusion

These are the top ten CSS Animation and Transitions that I’ve created in HTML and CSS. I hope you like them. Comment down the CSS Animation Transition that you liked most and if you want more let me know in the comment section.

If you want to boost your HTML and CSS as well as JavaScript skills then you can visit my YouTube Channel.

There I have uploaded lots of projects which could be beneficial for you.If you found this blog helpful, don’t forget to share it with others.

Flipping Card UI Design in HTML & CSS

CodingNepal — Mon, 24 Oct 2022 21:11:20 +0000

Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. There are lots of other Card designs I have already created before.

A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on.

Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well.

To see the real demo of this card and how it flips and the back part of this card, you can watch the given video tutorial of this project [Flipping Card UI Design], that I have given below. After watching the given video tutorial, you also get the idea, of how all the HTML and CSS code is working behind it.

Flipping Card UI Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this project [Flipping Card UI Design], before jumping into the source code file. I would like to briefly explain the given video.

As you have seen in the video tutorial of this project [Flipping Card UI Design]. At first on the screen we saw, there were two gradient balls. Between those two balls, there was our card with some basic information that debit cards need to have like name, card number, expiry date, and others. When I hover over the card, it flipped and the back part of the card visibled. On the back part, there is some other information that typical has.

As you have seen, how I created those two balls. the card and its UI design and the code that is used to flip it by using only HTML and CSS. I hope you also can create this type of card with flipping animation on hove by using HTML and CSS. If you are feeling difficulty to create this project [Flipping Card UI Design], I have provided all the HTML and CSS code and all the images that I have used to create this Card, which you can find below.

Flipping Card UI Design [Source Codes]

To create a Flipping Card UI Design using HTML and CSS, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file




  
    
    
    
    Flipping Card UI Design
    
  
  
    
      
        
          
            
              
              Master Card
            
           
          

          
            
              Card Number
              8050 2030 3020 5040
              Prem Kumar Shahi
            

            
              Valid Thru
              05/28
            
          
        

        
          
            For customer service call +977 4343 3433 or email at
            mastercard@gmail.com
          
          
          005
          
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
            maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
            Libero et quis magni magnam nihil temporibus? Facere consectetur
            dolore reiciendis et veniam.

/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #121321;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  perspective: 1000px;
}
section::before {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.container:hover {
  transform: rotateY(180deg);
}
.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
  display: flex;
  align-items: center;
}
.front-face header {
  justify-content: space-between;
}
.front-face .logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
}
.front-face .chip {
  width: 50px;
}
.front-face .card-details {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  justify-content: space-between;
}
h6 {
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.card.back-face {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
}
.card.back-face h6 {
  font-size: 8px;
}
.card.back-face .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: #000;
}
.card.back-face .signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  border-radius: 6px;
  background: repeating-linear-gradient(
    #fff,
    #fff 3px,
    #efefef 0px,
    #efefef 9px
  );
}
.signature i {
  color: #000;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  margin-right: -30px;
  z-index: -1;
}
.card.back-face h5 {
  font-size: 8px;
  margin-top: 15px;
}

If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card 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.

View Live Demo

Card Flipping Animation in HTML & CSS

CodingNepal — Thu, 04 Nov 2021 21:11:19 +0000

Hello friend, hope you are doing well, as you know I have been creating lots of JavaScript projects for several. That’s why today I’m thinking of a card with flipping animation by using HTML and CSS only. Actually, when you hover on it, the card will flip and we would see the backface of the card.

Let’s have a look at the given image of the card. The design of the card is, I have inspired by the famous web series squid game. The icons you are seeing on the image are made by HTML and CSS only, I have not used any font icons.

Basically, when you hover on the card flip with 3d animation and you can see the backside of this card. On the backside, I have added an icon and number. Rather than words, I highly recommend you to watch the full video tutorial of this 3D flipping card. Then you will know the real demo of this card and its animation.

Card with flipping Animation in HTML CSS | Video

I have provided all the HTML and CSS source code of this Card with 3D Flipping Animation, before jumping into the source code files, you need to know some basic points of this project.

As you have seen on the given video tutorial of Card with flipping Animation. At first, you saw a card with three icons, and when I hovered on the card it flips and we saw the backside of that card. As you know, how to make a triangle with a border, circle, square, and home icon by using only HTML and CSS.

I could bring that icon from websites like font awesome and others, but I thought to make it with HTML and CSS, which makes our program more interesting and adventurous.

Card with flipping Animation [Source Code]

To get the following HTML and CSS source code for Card with flipping Animation. 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.




  
    
     Card with Flip Animation | CodingLab 
    
   

  
    
      
        
        
        
      
      
        
          
        
        8650 4006

@import url('https://fonts.googleapis.com/css?family=Poppins: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: #EED891;
}
.wrapper{
  position: relative;
  height: 330px;
  width: 620px;
  perspective: 1000px;
}
.wrapper .flip-card{
  position: relative;
  height: 100%;
  width: 100%;
  background: #D48600;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}
.wrapper:hover .flip-card{
  transform: rotateY(180deg);
}
.flip-card .card{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: #D48600;
  border-top: 2px solid #cc6600;
  border-left: 2px solid #cc6600;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  backface-visibility: hidden;
  position: absolute;
}
.card span.circle,
.card span.square{
  height: 110px;
  width: 110px;
  border: 10px solid #4d2600;
}
.card span.circle{
  border-radius: 50%;
}
.card span.triangle{
  position: relative;
  height: 0;
  width: 0;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 110px solid #4d2600;
  margin-right: 16px;
}
.card span.triangle::before{
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: -40px;
  top: 20px;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
  border-bottom: 80px solid #D48600;
}
.back.card{
  transform: rotateY(180deg);
}
.back.card .home-logo{
  position: relative;
  height: 65px;
  width: 65px;
  border: 5px solid #4d2600;
  border-radius: 50%;
  margin-right: 16px;
}
.home-logo .icon{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(6px);
  display: inline-block;
  height: 15px;
  width: 25px;
  background: #4d2600;
}
.home-logo .icon::before{
  content: "";
  position: absolute;
  top: -15px;
  height: 25px;
  width: 25px;
  background: #4d2600;
  transform: rotate(45deg);
}
.back.card .num{
  font-size: 25px;
  font-weight: 600;
  color: #4d2600;
}

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.

Awesome Hover Animation on Social Media Icons using HTML & CSS

CodingNepal — Fri, 01 May 2020 10:09:00 +0000

Hello reader, Today in this blog you’ll learn how to create Floating Social Media Icons with Hover Animation using only HTML & CSS. Previously I have shared a Scroll To Top or Back To Top Button using only HTML and CSS, now it’s time to create a Social Media Button with Hover Animation.

The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, social icons are automatically displayed on your site, letting your visitors connect with you via your chosen networks.

As you can see in the image, this is a stylish Floating Social Media Widget, which is based on only HTML & CSS. There are some social media icons like Facebook, Twitter, Instagram, Github, and YouTube.

All icon’s background is in gradient color that means two colors are mixed to create a background. At first, all icon’s background has been square but when you’ll hover on the particular icon the background rotates at 360 deg and the shape of the background will be a circle. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Awesome Hover Animation on Social Media Icons).

Video Tutorial of Awesome Social Media Icons

I hope you understood the basic codes and concepts behind creating this widget. And I believe you like this Hover Animation. You can use this Social Media Widget on your website, projects, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this widget to the next level after changing some lines of code.

If you like this Social Media Widget with Hover Animation and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Awesome Hover Animation on Social Media Icons [Source Codes]

To create this Awesome Social Media Widget. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.




   
      
      Social Icons Hover Animation | CodingNepal

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
  margin: 0;
  padding: 0;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.icons{
  list-style: none;
}
.icons li{
  height: 70px;
  width: 70px;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
}
.icons li:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 10%;
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
  transition: all 0.3s ease-in;
}
.icons li:hover:before{
  transform: rotate(360deg);
  border-radius: 100%;
}
.icons li a span{
  font-size: 27px;
  line-height: 70px;
  color: #fff;
  transition: all 0.3s ease-out;
}
.icons li:hover a span{
  transform: scale(1.2);
}

That’s all, now you’ve successfully created an Awesome Hover Animation on Social Media Icons using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

CSS Hover Animation – CodingNepal

How to Create Glassmorphism Sidebar in HTML and CSS

Steps To Create Glassmorphism Sidebar in HTML & CSS

Conclusions and Final Words

Input Label Animation in HTML & CSS

Input Label Animation in HTML & CSS | Video Tutorial

You May Like This Video:

Input Label Animation in HTML & CSS [Source Codes]

Top 10 Best CSS Animation & Transition

1. 3D Layer CSS Hover Animation on Social Media Buttons

2. CSS Hover Animation Multiple Color Dots

3. CSS Hover Animation Image Transition

4. CSS Animation Heart Spinner

5. CSS Animation Text Glitch Effect

6. CSS Hover Animation on Button

7. CSS Hover Animation Navigation Menu

8. CSS Animation Skeleton Loading

8. Simple CSS Animation Loading Spinner

9. CSS Animation Glowing Gradient Media Icons

10. CSS Animation Skills Bar

Conclusion

Flipping Card UI Design in HTML & CSS

Flipping Card UI Design in HTML & CSS | Video Tutorial

You May Like This:

Flipping Card UI Design [Source Codes]

Card Number

8050 2030 3020 5040

Prem Kumar Shahi

Valid Thru

05/28

For customer service call +977 4343 3433 or email at mastercard@gmail.com

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia maiores sed doloremque nesciunt neque beatae voluptatibus doloribus. Libero et quis magni magnam nihil temporibus? Facere consectetur dolore reiciendis et veniam.

Card Flipping Animation in HTML & CSS

Card with flipping Animation in HTML CSS | Video

You Might Like This:

Card with flipping Animation [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 ]

Awesome Hover Animation on Social Media Icons using HTML & CSS

Video Tutorial of Awesome Social Media Icons

Awesome Hover Animation on Social Media Icons [Source Codes]