CSS Image Styling Practice Questions with Solutions

By /

Introduction

CSS image styling helps make images more attractive and professional. You can control an image’s size, borders, corners, shadows, alignment, filters, and hover effects using CSS. These techniques are commonly used in blogs, portfolios, e-commerce websites, and business websites. In this chapter, you’ll practice CSS image styling through simple solved CSS Image Styling practice questions that are easy for beginners to understand.

Question 1: Add a Border Around an Image

Problem Statement

Write CSS to add a 2px solid black border around an image.

CSS Code

img {    border: 2pxsolidblack;}

Output

The image displays with a 2px black border.

Explanation

  • border adds a visible outline around the image.
  • 2px sets the border thickness.
  • solid creates a continuous border line.

Question 2: Create Rounded Image Corners

Problem Statement

Write CSS to create rounded corners on an image.

CSS Code

img {    border-radius: 15px;}

Output

The image displays with 15px rounded corners.

Explanation

  • border-radius rounds the image corners.
  • Larger values create more rounded edges.
  • Rounded corners give images a modern appearance.

Question 3: Make an Image Circular

Problem Statement

Write CSS to display an image as a perfect circle.

CSS Code

img {    border-radius: 50%;}

Output

The image appears as a perfect circle.

Explanation

  • border-radius: 50%; creates a circular shape.
  • The image should have equal width and height for a perfect circle.
  • This style is commonly used for profile pictures.

Question 4: Add a Shadow to an Image

Problem Statement

Write CSS to add a soft shadow around an image.

CSS Code

img {    box-shadow: 04px8pxgray;}

Output

The image displays with a soft shadow around it.

Explanation

  • box-shadow adds depth to the image.
  • It creates a floating effect.
  • Shadows make images stand out from the background.

Question 5: Make an Image Responsive

Problem Statement

Write CSS to make an image automatically adjust to different screen sizes.

CSS Code

img {    max-width: 100%;    height: auto;}

Output

The image resizes automatically without losing its aspect ratio.

Explanation

  • max-width: 100%; prevents the image from overflowing its container.
  • height: auto; keeps the image proportions correct.
  • This technique is essential for responsive web design.

Question 6: Center an Image

Problem Statement

Write CSS to display an image in the center of its container.

CSS Code

img {    display: block;    margin: auto;}

Output

The image appears centered horizontally inside its container.

Explanation

  • display: block; makes the image behave like a block element.
  • margin: auto; automatically centers the image.
  • This is one of the most common methods for centering images.

Question 7: Add Opacity to an Image

Problem Statement

Write CSS to make an image 70% visible.

CSS Code

img {    opacity: 0.7;}

Output

The image appears slightly transparent.

Explanation

  • opacity controls image transparency.
  • 0.7 means the image is 70% visible.
  • This effect is commonly used for banners and overlays.

Question 8: Zoom an Image on Hover

Problem Statement

Write CSS to slightly enlarge an image when the mouse pointer is placed over it.

CSS Code

img:hover {    transform: scale(1.1);}

Output

The image becomes slightly larger when hovered.

Explanation

  • transform: scale(1.1); increases the image size by 10%.
  • :hover activates the effect.
  • This creates an attractive interactive animation.

Question 9: Apply a Grayscale Filter

Problem Statement

Write CSS to display an image in grayscale.

CSS Code

img {    filter: grayscale(100%);}

Output

The image appears black and white.

Explanation

  • filter: grayscale(100%); removes all colors.
  • The image is displayed in shades of gray.
  • This effect is often used in modern galleries.

Question 10: Add a Smooth Hover Transition

Problem Statement

Write CSS to make image hover effects animate smoothly.

CSS Code

img {    transition: 0.3s;}

Output

Any supported image effect changes smoothly over 0.3 seconds instead of instantly.

Explanation

  • transition creates smooth animations.
  • 0.3s specifies the animation duration.
  • It is commonly combined with hover effects such as transform, opacity, or filter.

Key Takeaways

  • border adds an outline around an image.
  • border-radius creates rounded or circular images.
  • box-shadow adds depth with a shadow effect.
  • max-width: 100%; makes images responsive.
  • display: block; with margin: auto; centers images.
  • opacity controls image transparency.
  • transform: scale() creates zoom effects.
  • filter applies visual effects such as grayscale.
  • transition creates smooth image animations.

Frequently Asked Questions (FAQs)

1. How do I create rounded corners on an image?

Use:

img {    border-radius: 15px;}

2. How do I make an image circular?

Use:

img {    border-radius: 50%;}

Make sure the image has equal width and height.

3. How can I make an image responsive?

Use:

img {    max-width: 100%;    height: auto;}

This keeps the image inside its container while maintaining its aspect ratio.

4. How do I center an image?

Convert the image into a block element and use automatic margins.

img {    display: block;    margin: auto;}

5. Which CSS property creates a zoom effect?

The transform property with scale() creates a zoom effect.

Example:

img:hover {    transform: scale(1.1);}

6. How do I convert an image to black and white?

Use the filter property.

img {    filter: grayscale(100%);}

7. Which CSS property creates smooth image animations?

The transition property creates smooth animations for hover effects and other CSS changes.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top