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 603 of 801
How to create a responsive portfolio gallery grid with CSS?
If you are a shutterbug and love photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily using CSS Grid or Flexbox. Syntax .gallery-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } Method 1: Using CSS Grid CSS Grid provides an efficient way to create responsive gallery layouts. The auto-fit and minmax() functions automatically adjust the number ...
Read MoreHow to add a border to an image with CSS?
To add a border to an image, use the border property and set it to the element. This is the shorthand property to set the border style, width, color, etc. The border style can be solid, double, dotted, etc. Syntax img { border: width style color; } Basic Border Example The following example adds a solid border to an image − img { ...
Read MoreHow to create a thumbnail image CSS?
A thumbnail image in CSS is a small, clickable preview of a larger image that typically opens the full-size version when clicked. Thumbnails are commonly used in galleries, portfolios, and product listings to save space while providing visual previews. Syntax img { width: value; height: value; border: width style color; border-radius: value; } img:hover { box-shadow: values; transform: scale(value); } Example: Basic Thumbnail with Hover Effect The following example ...
Read MoreHow to create a responsive image with CSS?
Responsive images automatically scale with the screen size, ensuring optimal display across all devices. The key CSS properties for creating responsive images are width, max-width, and height. Syntax img { max-width: 100%; height: auto; } Method 1: Using max-width Property The most common approach uses max-width: 100% to ensure the image never exceeds its container width − .responsive-img { max-width: 100%; ...
Read MoreHow 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 More