QuitExams

W3.CSS Cards & Opacity

A Card in W3.CSS is a container with a shadow that highlights content and separates it from the background. You can use classes like w3-card, w3-card-2, w3-card-4 to increase shadow depth. Opacity classes (w3-opacity) allow you to make elements semi-transparent.

1️⃣ Basic Card (w3-card)

Simple card with shadow effect.

<div class="w3-card w3-padding w3-blue">
  This is a basic card
</div>

2️⃣ Card with Higher Shadow (w3-card-4)

Use w3-card-4 for a deeper shadow.

<div class="w3-card-4 w3-padding w3-green">
  Card with deeper shadow
</div>

3️⃣ Card with Opacity (w3-opacity)

Use w3-opacity to make the card semi-transparent.

<div class="w3-card w3-padding w3-red w3-opacity">
  Card with 50% opacity
</div>

4️⃣ Card with Hover Shadow (w3-hover-shadow)

Add w3-hover-shadow to increase shadow on mouse hover.

<div class="w3-card w3-padding w3-orange w3-hover-shadow">
  Hover me for shadow
</div>