Posts

Simple Sidebar Menu Using HTML, CSS & JavaScript

Image
From this tutorial, you will learn how to create simple sidebar menus using HTML CSS, and JavaScript. Currently, the HTML sidebar menu is an important web element that is often used in the case of websites. Although navigation bars can be found on most websites. However, at the present time, both the navigation bar and the responsive sidebar menu are kept in the sites that are being created. Earlier I shared many more sidebar HTML CSS designs . They are very advanced but this design is very simple. Simple Sidebar Menu HTML CSS If you know basic Html and CSS then you can easily create this CSS sidebar navigation menu. Some HTML, CSS and just 2 lines of JavaScript have been used to create this sidebar Html CSS template . Earlier I created a drop-down sidebar menu . But I used some jquery in it. There are many types of side menubars. In some cases, this menu bar appears to be in a completely fixed state while in others it is in the form of a pop-up.  We do not see the men
Post a Comment
Read more

How to Create An Image Zoom on Hover With JavaScript

Image
Creating an image zoom is very easy if you know JavaScript. In this tutorial, I will show you how to create a JavaScript image zoom effect . You will find many tutorials on this topic on the internet. But here I will tell you the easiest way to zoom an image by HTML CSS JavaScript bar. With this, you will know how to add image zoom in an image using JavaScript. JavaScript Image Zoom on Hover  Earlier I shared tutorials on creating many types of Image Zoom , Image Magnifier Glass, and Image Hover Effects . There is no need to worry if you are a beginner. Here I have shown step by step how to make image zoom javascript. You can also create zoom effects using CSS only if you want.  However, in that case, you will not be able to control the position of the zoom. In this case, the zoom effect will follow your mouse cursor. This means that the image of the place where your mouse will be zoomed. See the Pen Vanilla image zoom by Shantanu Jana ( @shantanu-jana ) on CodePen .
Post a Comment
Read more

Simple CSS Image Hover Effects with Text (Code + Demo)

Image
If you want to add Hover Effects to any image then this tutorial is for you. Here I will show you how to create image Hover Effects with Text using CSS and HTML.  Different types of CSS Hover Effects can be added to the image. One of the notable ones is text. This type of CSS Hover Effects with Text design will have some text in the image.  However, those texts cannot be seen. You can see it when you hover over the image. A kind of border animation can be seen with this. All these things are maintained only by CSS. Demo Download The designs I have already shown will show different types of border animation, color animation, and hover zoom.  Although this kind of cool image hovers effects you will find a lot on the Internet. But this tutorial will be best for you. Because here I will discuss with you how it was created and how you can add Hover Effects with Text to any of your images. So if you are a beginner and want to know something new then you must follow this
Post a Comment
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Post a Comment
Read more

10 Best Automatic Image Slider in HTML CSS JavaScript

Image
If you are looking for an automatic image slider in HTML CSS for your project then this article is for you. Here I have created a collection of 9 Best Automatic Image Sliders . There are different types of image sliders.  Some designs are made by HTML and CSS only, some are made by JavaScript and some designs are made by JQuery. Here is the complete information, source code, and live preview of each automatic image slideshow . There are different types of automatic slider HTML . In some cases, the image changes automatically. In that case, there is no system to change the manual. Again there are some designs where the image can be changed both automatically and manually. All kinds of designs are here. Automatic image slider in HTML CSS This automatic image slider was created using only HTML and CSS. It is made especially for beginners. If you are a beginner and have created an image slider for the first time then this design is for you.  Here are some simple HTML and CSS codes us
Post a Comment
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Post a Comment
Read more

Neumorphism Button Design Using HTML & CSS

Image
Here you will learn how to create Neumorphism Button using CSS . Neumorphism is a simple UI design that is easy to make and very interesting to look at. Here I have shown how to create Neumorphism Button using HTML and CSS. I have shared many designs of buttons before using CSS. However, this design is very simple but interesting. Here I have used the hover effect in Neumorphism Button . Below is a preview box. Which will help you to know how to create CSS Neumorphism Button . See the Pen Neumorphism Button Design end hover 360 rotate by Shantanu Jana ( @shantanu-jana ) on CodePen . Below I have shared all the code to create these CSS buttons . Like I said HTML and CSS are used here. So you create an HTML and CSS file. HTML Code: The following code is the HTML code that has been used to create this Neumorphism Social Button . 4 buttons have been created here. Copy <div class = "wrapper" >   <div class = "box" >     <i c
Post a Comment
Read more