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
Front End Technology Articles
Page 499 of 652
How to create an avatar image with CSS?
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. Syntax .avatar { border-radius: 50%; width: value; height: value; } Method 1: Basic Circular Avatar The images are placed just like any other image using the element. A class is set for both images ...
Read MoreHow to align images side by side with CSS?
To align images side by side, we can use the float property in CSS. With that, flex also allows us to align images. Let us understand them one by one with examples beginning with aligning images side by side with the float property. Syntax /* Using Float */ .image-container { float: left; width: value; } /* Using Flexbox */ .container { display: flex; justify-content: value; } Method 1: Align Images Side by Side With Float We can ...
Read MoreHow to create a blurry background image with CSS?
A blurry background image creates an elegant overlay effect where content can be displayed over a softened background. This technique is commonly used for hero sections, modal overlays, and content cards to improve readability while maintaining visual appeal. Syntax selector { background-image: url("image-path"); filter: blur(value); background-size: cover; background-position: center; } Method 1: Basic Blurred Background The following example creates a blurred background image using the CSS filter property with the blur() function − ...
Read MoreHow to create a Hero Image with CSS?
A hero image is a large, prominent image placed at the top of a webpage to grab visitors' attention. It typically includes overlay text and call-to-action buttons to engage users immediately. Syntax .hero-container { background-image: url('image-url'); height: 100vh; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } Example The following example creates a full-screen hero image with overlay text and a call-to-action button − ...
Read MoreHow to add a form to a full-width image with CSS?
We can easily add a form on a web page. With that, a form can also be added to an image with CSS. In this tutorial, a form will be added to a full-width image with CSS. Let us see how. Syntax .container { background-image: url("image.jpg"); background-size: cover; position: relative; } .form { position: absolute; /* positioning values */ } Set the Styles for the Web Page To begin, set the height, margin ...
Read MoreHow to create a full-page background image with CSS?
Creating a full-page background image with CSS allows you to display an image that covers the entire viewport. This technique is commonly used for hero sections, landing pages, and creating immersive visual experiences. Syntax .background { background-image: url('image-url'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; } Key Properties PropertyValueDescription background-sizecoverScales image to cover entire container background-positioncenterCenters the image in the container background-repeatno-repeatPrevents image from repeating height100vhSets height to full viewport ...
Read MoreHow 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 More