Adjusting the brightness of an image is a simple yet effective way to enhance your website’s visual design. By using CSS, you can easily make images brighter or darker to fit the style of your page. In this post, I’ll show you how to do this using a small HTML and CSS example.
Step-by-Step Guide
1.Start with the Basic HTML Structure
Create a basic HTML file to hold your content. This will include the <img> tag to display the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjust Image Brightness</title>
</head>
<body>
<img src="image.jpg">
</body>
</html>
2.Add a Class to the Image
Give the <img> tag a class so that you can easily target it in CSS for styling.
<img src="image.jpg" class="bright-img">
3.Write CSS to Adjust Brightness
Use the filter property in your CSS file to control the brightness of the image. Add a <style> block inside the <head> section or link an external CSS file.
4.Combine HTML and CSS
Put everything together by combining your HTML and CSS into a single file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bright-img {
filter: brightness(1.5);
}
</style>
</head>
<body>
<img src="image.jpg" class="bright-img">
</body>
</html>