Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 604 of 801
How to create an image with a transparent background text using CSS?
We can create an image with transparent background text by overlaying text content on an image using CSS positioning and background transparency. This technique uses a semi-transparent background color with the rgba() function to create an overlay effect that makes text readable while keeping the background image visible. Syntax .text-overlay { background: rgba(red, green, blue, alpha); position: absolute; } Method 1: Bottom Overlay Text This approach positions the text overlay at the bottom of the image with a transparent background − ...
Read MoreHow to add visual effects to images with CSS?
The CSS filter property is used to apply visual effects to images such as blur, brightness, contrast, drop shadow, grayscale, and more. This property allows you to enhance or modify the appearance of images directly through CSS without needing image editing software. Syntax selector { filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); } Common Filter Effects Filter FunctionDescriptionValues blur()Applies blur effectpx values (e.g., 5px) brightness()Adjusts brightness0% to 100%+ (100% = normal) contrast()Adjusts ...
Read MoreHow to create an image overlay zoom effect on hover with CSS?
The image overlay zoom effect on hover creates a smooth animation where a colored overlay scales up when the mouse cursor hovers over an image. This effect uses the :hover selector combined with CSS transforms and transitions to create an engaging visual interaction. Syntax .container:hover .overlay { transform: scale(1); transition: transform duration ease-function; } HTML Structure First, create a container with an image and overlay div ? Caption Text ...
Read MoreHow to create image overlay hover effect with CSS?
The image overlay effect on hover is hidden when the page loads and becomes visible when the mouse cursor is hovered over the image. The smooth transition effect is achieved using the CSS transition property combined with opacity and position properties. Syntax .overlay { transition: duration ease; opacity: 0; position: absolute; } .container:hover .overlay { opacity: 1; } Method 1: Basic Overlay with Text This method creates a simple text overlay that appears centered over the image ...
Read MoreHow to create a tabbed image gallery with CSS and JavaScript?
A tabbed image gallery allows users to click on small thumbnail images to view them in a larger format. This creates an interactive way to display multiple images without taking up too much page space initially. Let us see how to create a tabbed image gallery using CSS and JavaScript. Syntax /* Basic thumbnail styling */ .thumbnail { cursor: pointer; transition: transform 0.3s; } /* Modal container */ .modal { display: none; position: fixed; z-index: 1000; ...
Read MoreHow to create a responsive Image Grid with HTML and CSS?
A responsive image grid displays images in a grid layout that adapts to different screen sizes. Using CSS flexbox, we can create a flexible grid system that automatically adjusts the number of columns based on the viewport width. Syntax /* Outer grid container */ .outer-grid { display: flex; flex-wrap: wrap; } /* Inner grid columns */ .inner-grid { flex: percentage; max-width: percentage; } /* Responsive breakpoints */ @media screen and (max-width: breakpoint) { /* Responsive ...
Read MoreHow to create a modal image gallery with CSS and JavaScript?
A modal image gallery allows users to view thumbnail images and click on them to open a larger version in a modal overlay. This creates an elegant way to showcase multiple images without cluttering the page layout. Syntax /* Modal container */ .modal { display: none; position: fixed; z-index: 1; background-color: rgba(0, 0, 0, 0.9); } /* Modal image */ .modalImage { display: block; margin: auto; } Example The ...
Read MoreHow to create a responsive header with CSS?
A responsive header is a navigation bar that adapts to different screen sizes, ensuring optimal user experience across desktop, tablet, and mobile devices. The header typically includes a logo and navigation menu that reorganizes itself based on the viewport width. Syntax /* Basic responsive header structure */ nav { overflow: hidden; background-color: color; } @media screen and (max-width: width) { /* Responsive styles */ } Set the nav for logo and menus The element is used to place the logo ...
Read MoreHow to create a pill navigation menu with CSS?
A pill navigation menu features rounded, button-like navigation links that resemble pills. This design provides an intuitive and modern user interface for website navigation. The pill shape is achieved using CSS border-radius property to create rounded corners. Syntax nav { /* Container styles */ } nav a { border-radius: value; /* Other pill styling */ } Example: Creating a Pill Navigation Menu The following example demonstrates how to create a complete pill navigation menu with hover effects and active states − ...
Read MoreHow to create a fixed social media icon bar with CSS?
A fixed social media icon bar allows users to access your social media profiles from anywhere on the page. The bar remains visible even when scrolling, making it convenient for visitors to connect with you on different platforms. Syntax .social-bar { position: fixed; top: value; left/right: value; } Example The following example creates a fixed social media icon bar that stays positioned on the left side of the page − * { ...
Read More