CSS Opacity Practice Questions with Solutions

Introduction

The CSS opacity property controls the transparency of an element. An opacity value of 1 makes the element fully visible, while 0 makes it completely transparent. Values between 0 and 1 create different transparency levels. The opacity property is commonly used for image effects, hover animations, overlays, and modern website designs. In this chapter, you’ll practice CSS Opacity practice questions through simple solved questions that are easy for beginners to understand.

Question 1: Make an Image 50% Transparent

Problem Statement

Write CSS to make an image 50% transparent.

CSS Code

img {    opacity: 0.5;}

Output

The image appears 50% transparent while remaining visible.

Explanation

• opacity controls the transparency of an element.
• 0.5 means the element is 50% visible.
• Child elements also inherit the transparency effect.

Question 2: Make an Element Fully Visible

Problem Statement

Write CSS to display a <div> with no transparency.

CSS Code

div {    opacity: 1;}

Output

The <div> is fully visible with no transparency.

Explanation

• opacity: 1; is the default value.
• The element is completely opaque.
• No transparency effect is applied.

Question 3: Make an Element Completely Transparent

Problem Statement

Write CSS to make a <div> completely transparent.

CSS Code

div {    opacity: 0;}

Output

The <div> becomes completely invisible, but it still occupies space in the layout.

Explanation

• opacity: 0; hides the element visually.
• The element remains in the document flow.
• Users cannot see it, but it still exists on the page.

Question 4: Change Image Opacity on Hover

Problem Statement

Write CSS to make an image fully visible when the mouse pointer is placed over it.

CSS Code

img {    opacity: 0.5;}img:hover {    opacity: 1;}

Output

The image is 50% transparent by default and becomes fully visible when hovered.

Explanation

• The default opacity is 0.5.
• :hover changes the opacity to 1.
• This creates a simple interactive image effect.

Question 5: Create a Semi-Transparent Background

Problem Statement

Write CSS to make a <div> 80% visible.

CSS Code

div {    opacity: 0.8;}

Output

The <div> appears slightly transparent while remaining easy to see.

Explanation

• opacity: 0.8; makes the element 80% visible.
• It creates a subtle transparency effect.
• This style is often used for banners and content boxes.

Question 6: Fade a Button on Hover

Problem Statement

Write CSS to make a button slightly transparent when the mouse pointer is placed over it.

CSS Code

button:hover {    opacity: 0.7;}

Output

The button becomes slightly transparent when hovered.

Explanation

• :hover applies the style when the mouse pointer is over the button.
• opacity: 0.7; makes the button 70% visible.
• This creates a simple hover effect.

Question 7: Create a Transparent Card

Problem Statement

Write CSS to make a card slightly transparent.

CSS Code

.card {    opacity: 0.9;}

Output

The card appears 90% visible with a slight transparency effect.

Explanation

• opacity: 0.9; creates a subtle transparent look.
• It helps create modern UI designs.
• The card content also becomes slightly transparent.

Question 8: Create an Overlay Effect

Problem Statement

Write CSS to create a semi-transparent overlay.

CSS Code

.overlay {    opacity: 0.6;}

Output

The overlay appears 60% visible, allowing the background to be partially seen.

Explanation

• opacity: 0.6; creates a transparent overlay.
• It is commonly used on banners and hero sections.
• The content inside the overlay also becomes transparent.

Question 9: Make a Disabled Button Semi-Transparent

Problem Statement

Write CSS to make a disabled button appear faded.

CSS Code

button:disabled {    opacity: 0.5;}

Output

Disabled buttons appear 50% transparent, making them look inactive.

Explanation

• :disabled selects disabled buttons.
• opacity: 0.5; visually indicates that the button cannot be clicked.
• This improves user experience.

Question 10: Apply Opacity to an Image Gallery

Problem Statement

Write CSS to make gallery images slightly transparent and fully visible when hovered.

CSS Code

.galleryimg {    opacity: 0.6;}.galleryimg:hover {    opacity: 1;}

Output

Gallery images are slightly transparent by default and become fully visible when hovered.

Explanation

• Images start with opacity: 0.6;.
• :hover changes the opacity to 1.
• This creates an attractive image gallery effect.

Key Takeaways

• opacity controls an element’s transparency.
• opacity: 1; makes an element fully visible.
• opacity: 0; makes an element completely transparent while keeping its space in the layout.
• Values between 0 and 1 create partial transparency.
• opacity affects both the element and its child elements.
• :hover is commonly combined with opacity for interactive effects.
• opacity is widely used for overlays, cards, buttons, and image galleries.

Frequently Asked Questions (FAQs)

1. What is the CSS opacity property?

The opacity property controls how transparent or visible an element appears.

2. What is the default value of opacity?

The default value is:

opacity: 1;

This makes the element fully visible.

3. What happens when opacity: 0; is used?

The element becomes invisible, but it still occupies space in the page layout.

4. Can I use decimal values with opacity?

Yes. You can use values from 0 to 1.

Examples:

• 0
• 0.3
• 0.5
• 0.8
• 1

5. Does opacity affect child elements?

Yes. When you apply opacity to a parent element, all of its child elements become transparent as well.

6. Where is the opacity property commonly used?

It is commonly used for:

• Image hover effects
• Buttons
• Cards
• Overlays
• Hero sections
• Galleries

7. What is the difference between opacity and rgba() transparency?

• opacity changes the transparency of the entire element, including its content.
• rgba() changes the transparency of a specific color, such as a background color, without affecting the element’s text or child elements.

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

Rishabh Kumar