Objective: To practice and demonstrate understanding of creating image shadow using CSS
Requirements:
1. Create an HTML file with an image.
2. Add a shadow to the image using CSS.
3. Use a hover effect to enlarge the image when the user hovers over it.
Instructions:
1. Create a new HTML file and name it "image-shadow.html".
2. Use the <!DOCTYPE html> declaration and create the basic structure of an HTML file, including the <html>, <head>, and <body> tags.
3. Inside the <head> tag, create a <title> tag with the title "CSS Image Shadow Assignment".
4. Inside the <body> tag, create an <img> tag and add a source to the image.
5. In the CSS section, add the "box-shadow" property to the image to give it a shadow. Experiment with different values until you find a style that you like.
6. Add a hover effect to the image using the "transform" property to enlarge the image when the user hovers over it.
7. Save the "image-shadow.html" file and open it in a web browser to verify that it looks as expected.
8. Experiment with different styles and hover effects to create a unique image that demonstrates your understanding of creating image shadow using CSS.
Bonus Challenge: Try experimenting with different CSS properties, such as opacity and transition, to create more advanced styles and hover effects for your image.
