CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Images
Images bring life to a website. With just a few lines of HTML and CSS, you can resize, shape, filter, and make them responsive.
Basic Image Tag
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Example</title>
</head>
<body>
<img decoding="async" src="image.jpg" alt="Learn With Arshyan">
</body>
</html>
srcpoints to the image location.altis the text shown if the image doesn’t load.
Image Size (Inline & CSS)
Inline Style
<!DOCTYPE html>
<html>
<head><title>Inline Image Sizing</title></head>
<body>
<img fetchpriority="high" decoding="async" src="image.jpg" width="400" height="300" alt="Inline Sized Image">
</body>
</html>
CSS Styling
<!DOCTYPE html>
<html>
<head>
<title>CSS Styled Image</title>
<style>
img {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="CSS Sized Image">
</body>
</html>
Rounded Corners with Border Radius
Want curved edges or circular images? Use border-radius.
<!DOCTYPE html>
<html>
<head>
<title>Rounded Image</title>
<style>
img {
border-radius: 25px;
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Rounded Image">
</body>
</html>
For a circular image:
<!DOCTYPE html>
<html>
<head>
<title>Circular Image</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Circular Image">
</body>
</html>
Responsive Image
Responsive images adjust automatically based on screen size. This ensures the image resizes proportionally across desktops, tablets, and mobiles.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img decoding="async" src="image.jpg" alt="Responsive Image">
</body>
</html>
Fit Content, Max Content, Min Content
fit-content: Element takes the size of its content, but not more.max-content: Expands fully to fit content, possibly stretching the containmin-content: Shrinks to fit the smallest required space.
<!DOCTYPE html>
<html>
<head>
<title>Image Size Content</title>
<style>
.fit {
width: fit-content;
}
.max {
width: max-content;
}
.min {
width: min-content;
}
</style>
</head>
<body>
<img decoding="async" class="fit" src="image.jpg" alt="Fit Content"><br>
<img decoding="async" class="max" src="image.jpg" alt="Max Content"><br>
<img decoding="async" class="min" src="image.jpg" alt="Min Content">
</body>
</html>
Image Opacity
You can make an image transparent or semi-transparent with opacity.
<!DOCTYPE html>
<html>
<head>
<title>Opacity Example</title>
<style>
img {
opacity: 0.5;
}
</style>
</head>
<body>
<img decoding="async" src="image.jpg" alt="Semi Transparent Image">
</body>
</html>
Image Filters
Filters let you add artistic effects to images using just CSS.
Grayscale
Turn your image black & white:
<!DOCTYPE html>
<html>
<head>
<title>Grayscale Image</title>
<style>
img {
filter: grayscale(100%);
}
</style>
</head>
<body>
<img decoding="async" src="image.jpg" alt="Grayscale">
</body>
</html>
Blur
Add a soft blur effect:
<!DOCTYPE html>
<html>
<head>
<title>Blur Image</title>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Blurred">
</body>
</html>
Brightness
Make the image lighter or darker:
<!DOCTYPE html>
<html>
<head>
<title>Bright Image</title>
<style>
img {
filter: brightness(150%);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Bright Image">
</body>
</html>
Contrast
Increase or decrease contrast:
<!DOCTYPE html>
<html>
<head>
<title>Contrast Image</title>
<style>
img {
filter: contrast(200%);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="High Contrast">
</body>
</html>
Invert
Invert the colors of an image:
<!DOCTYPE html>
<html>
<head>
<title>Invert Image</title>
<style>
img {
filter: invert(100%);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Inverted">
</body>
</html>
Saturate
Boost or lower the color intensity:
<!DOCTYPE html>
<html>
<head>
<title>Saturate Image</title>
<style>
img {
filter: saturate(300%);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Saturated">
</body>
</html>
Hue Rotate
Shift the entire color spectrum of the image:
<!DOCTYPE html>
<html>
<head>
<title>Hue Rotate Image</title>
<style>
img {
filter: hue-rotate(120deg);
}
</style>
</head>
<body>
<img decoding="async" src="Image.jpg" alt="Hue Rotated">
</body>
</html>
