The overlay effect can be easily created on a web page. Let’s say we have placed the divs together on a web page. To let any of them appear when required is called an overlay effect. The overflow is also closeable with a cross sign on the top-right. Let us ... Read More

The fixed navigation bar fix on the web page using the position property and even on scroll it remains intact. It sticks to the top. On a lot of websites these days, the navigation bar fix to the top. The top property is also used. By specifying the CSS position ... Read More

We can easily create an image with a transparent background text. Set a black background with 0.5 opacity using the CSS background property. Position this using the position property and place to the bottom of an image. Place the text there i.e., a transparent background text on an image. Let ... Read More

The image overlay zoom effect on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay zoom using the transition property. Let us see how to create an image overload title on ... Read More

The image overlay title on hover is visible on an image when the mouse cursor is hovered. For that, the :hover selector is used. The transition needs to be set for the overlay using the transition property. Let us see how to create an image overload title on hover with ... Read More

An expanding grid is a grid that expands when a box is clicked. It hides by default but gets expanded to 100% when the box is clicked once. We will create three equal columns that floats right next to each other. On clicking any of the grid column, the grid ... Read More

A form that includes the details to subscribe to an email newsletter, includes the name and email-address input fields. With that, a checkbox to subscribe for the daily newsletter can also be created for the users. Also, a button to subscribe to the newsletter can also be seen. We will ... Read More

The avatar image on a website is a profile image visible under the author’s profile. Also visible under the team’s page where details of all the team members are visible on a company’s website. Let us see how to create an avatar image with HTML and CSS. Set the avatar ... Read More

To render a huge number of images in a website, it is advisable to use webp format as it provides better compression. We use the element to provide a fallback for unsupported browsers − ... Read More

A lot of websites these days have an animate search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML ... Read More