The image overlay effect on hover is hidden when the page loads and is visible when the mouse cursor is hovered on the image. The ease transition effect is set using the transition property to make the overlay effect possible. Let us see how to create an image overlay hover effect with HTML and CSS. Set the card container A parent div is set for the card text, image, and caption − Tree Position the card container The ... Read More

Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS. Set the images for the thumbnail For our example, we have considered 3 images and added to the web page using the element − Image Thumbnail When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor ... Read More

The image grid on a web page displays images in a grid. In an outer grid, we can create inner grids. Also, the responsiveness needs to be set for the image grid for different devices. On a web browser, check the responsiveness by resizing the web browser. Let us see how to create a responsive image grid with HTML and CSS. Set the outer and inner grid A div for the outer grid is set. Within that, the inner grids are set. We have set three inner grids inside our outer grid − ... Read More

Following is the code to create modal image gallery with CSS and JavaScript −Example Live Demo

On a web page, first the header is visible, then the content, and at the end the footer. A header includes the logo of the website and the menu. It can also include a search box on the right. The menus are created using the element. The selected link is always highlighted. On hovering any link, the color of that specific link change. Let us see how to create a responsive header with CSS on a web page. Set the nav for logo and menus The element is used to place the logo and menus. Both these are ... Read More

The Pill navigation menu is used for navigation and enhances user experience. The navigation items are set within it. The element is used to create a menu and works the same for pill navigation menu as well. Let us see how to create a pill navigation menu on a web page. Create a pill navigation menu First, we will create a menu using the element. The links are set using the element − Home Login Register Contact Us More Info ... Read More

Following is the code to produce a fixed social media icon bar with CSS −Example Live Demo *, *::before, *::after {    box-sizing: border-box; } main {    margin-left: 300px; } .SocialBar {    position: fixed;    display: block;    top: 30%;    font-size: 0;    width: 200px;    border: 2px solid darkgreen;    box-shadow: 5px 10px 18px rgb(55, 173, 39); } button {    display: block;    width: 100%;    margin: 0px;    border: none;    padding: 15px;    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    font-weight: bold;    font-size: 20px; } button:not(:last-child) {   ... Read More

On a web page, we can easily create a button group. We will create a single div for all the buttons in a button group. They will be set with display inline-block. Also, the hover effect will be set. Create a Button Group on a web Page In a div, set the buttons using the element − Facebook Twitter LinkedIn Style the Button Groups The display suggests how to control the layout of an element. In this case, the inline-block of the display property displays ... Read More

When you give page numbers to each page of a book, it is called pagination. On a website, pagination allows dividing pages and is a series of interconnect pages. It divides and sets ordinal number pf pages. For example, the first 1, 2, 3, 4, 5 pages links are visible on a web page to make it easier for users to navigate related content. Let us see how to create a pagination on a web page with the previous and next links as well. Create links for pagination The links are set using the element. A div is set ... Read More

The mega menu includes the menus with dropdown menus. The dropdown will have a complete setup for creating rows and columns and adding content like this − The mega menu i.e., the full-width dropdown menu in a navigation bar appears like this − On clicking the Projects dropdown menu, the dropdown menu appears − Set the Navigation Menu We have set the menu links inside the Home About Contact Us More Info Style the Menu and Links The navigation menu ... Read More