<div class="demo-header">
<h1>🎬 Container Queries Movie Cards</h1>
<p>Watch how these movie cards magically transform based on their container size, not the viewport! Try resizing the containers below.</p>
</div>
<div class="layout-grid">
<!-- Sidebar - Narrow Container -->
<div class="container-demo">
<h3>📱 Sidebar (Narrow)</h3>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1446776877081-d282a0f896e2?w=400&h=600&fit=crop" alt="Sci-Fi Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">Stellar Odyssey</h4>
<p class="movie-genre">Sci-Fi</p>
<p class="movie-year">2024</p>
<p class="movie-description">An epic journey through space and time as humanity searches for a new home among the stars.</p>
<div class="movie-rating">
<span class="stars">★★★★☆</span>
<span class="rating-number">8.2</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1516541196182-6bdb0516ed27?w=400&h=600&fit=crop" alt="Romance Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">Love in Paris</h4>
<p class="movie-genre">Romance</p>
<p class="movie-year">2023</p>
<p class="movie-description">A heartwarming tale of two strangers who meet in the romantic streets of Paris.</p>
<div class="movie-rating">
<span class="stars">★★★★★</span>
<span class="rating-number">9.1</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
</div>
<!-- Main Content - Wide Container -->
<div class="container-demo">
<h3>🖥️ Main Content (Wide)</h3>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop" alt="Action Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">Thunder Strike</h4>
<p class="movie-genre">Action</p>
<p class="movie-year">2024</p>
<p class="movie-description">High-octane action packed with incredible stunts and explosive sequences that will keep you on the edge of your seat from start to finish.</p>
<div class="movie-rating">
<span class="stars">★★★★☆</span>
<span class="rating-number">7.8</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1446776877081-d282a0f896e2?w=400&h=600&fit=crop" alt="Mystery Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">The Last Clue</h4>
<p class="movie-genre">Mystery</p>
<p class="movie-year">2023</p>
<p class="movie-description">A gripping mystery that unfolds in a small town where everyone has secrets and nothing is as it seems.</p>
<div class="movie-rating">
<span class="stars">★★★★★</span>
<span class="rating-number">8.9</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
</div>
<!-- Widget Area - Medium Container -->
<div class="container-demo">
<h3>📊 Widget Area (Medium)</h3>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1440404653325-ab127d49abc1?w=400&h=600&fit=crop" alt="Comedy Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">Laugh Out Loud</h4>
<p class="movie-genre">Comedy</p>
<p class="movie-year">2024</p>
<p class="movie-description">A hilarious comedy that brings together an unlikely group of friends on an unforgettable adventure.</p>
<div class="movie-rating">
<span class="stars">★★★★☆</span>
<span class="rating-number">8.5</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
<div class="movie-container">
<div class="movie-card">
<img src="https://images.unsplash.com/photo-1585951237318-9ea5e175b891?w=400&h=600&fit=crop" alt="Horror Movie" class="movie-poster">
<div class="movie-info">
<h4 class="movie-title">Midnight Terror</h4>
<p class="movie-genre">Horror</p>
<p class="movie-year">2023</p>
<p class="movie-description">A spine-chilling horror experience that will haunt your dreams long after the credits roll.</p>
<div class="movie-rating">
<span class="stars">★★★☆☆</span>
<span class="rating-number">7.2</span>
</div>
</div>
<button class="play-button">▶</button>
</div>
</div>
</div>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
color: white;
}
.demo-header {
text-align: center;
margin-bottom: 30px;
animation: fadeInDown 0.8s ease-out;
}
.demo-header h1 {
font-size: clamp(1.8rem, 4vw, 2.5rem);
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.demo-header p {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.layout-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
max-width: 1400px;
margin: 0 auto;
animation: fadeInUp 1s ease-out 0.3s both;
}
.container-demo {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.container-demo h3 {
margin-bottom: 15px;
text-align: center;
font-size: 1.2rem;
opacity: 0.9;
}
/* Container Query Setup */
.movie-container {
container-type: inline-size;
container-name: movie-card;
}
.movie-card {
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
cursor: pointer;
margin-bottom: 20px;
}
.movie-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
.movie-poster {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.3s ease;
}
.movie-card:hover .movie-poster {
transform: scale(1.05);
}
.movie-info {
padding: 15px;
}
.movie-title {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 5px;
color: #fff;
}
.movie-genre {
color: #ff6b6b;
font-size: 0.9rem;
margin-bottom: 8px;
font-weight: 500;
}
.movie-year {
color: #888;
font-size: 0.85rem;
margin-bottom: 10px;
}
.movie-description {
color: #ccc;
font-size: 0.85rem;
line-height: 1.4;
display: none;
}
.movie-rating {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.stars {
color: #ffd700;
}
.rating-number {
color: #fff;
font-weight: bold;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 107, 107, 0.9);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
color: white;
font-size: 1.5rem;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s ease;
display: none;
}
.movie-card:hover .play-button {
opacity: 1;
}
/* Container Queries - The Magic! */
/* Small containers (< 250px) - Compact card */
@container movie-card (max-width: 249px) {
.movie-card {
text-align: center;
}
.movie-poster {
height: 150px;
}
.movie-info {
padding: 10px;
}
.movie-title {
font-size: 0.95rem;
}
.movie-description,
.movie-year {
display: none;
}
}
/* Medium containers (250px - 400px) - Standard card */
@container movie-card (min-width: 250px) and (max-width: 400px) {
.movie-poster {
height: 220px;
}
.movie-description {
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.play-button {
display: flex;
align-items: center;
justify-content: center;
}
}
/* Large containers (> 400px) - Hero layout */
@container movie-card (min-width: 401px) {
.movie-card {
display: grid;
grid-template-columns: 200px 1fr;
height: 250px;
}
.movie-poster {
height: 100%;
width: 100%;
}
.movie-info {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.movie-title {
font-size: 1.4rem;
margin-bottom: 8px;
}
.movie-description {
display: block;
flex: 1;
margin: 10px 0;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.play-button {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
font-size: 2rem;
}
}
/* Responsive grid adjustments */
@media (max-width: 1024px) {
.layout-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
}
@media (max-width: 768px) {
.layout-grid {
grid-template-columns: 1fr;
}
}
/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.resize-handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.3);
cursor: nw-resize;
border-radius: 10px 0 15px 0;
}
.resize-handle::after {
content: "↘";
position: absolute;
bottom: 2px;
right: 3px;
font-size: 12px;
color: white;
}
// Add some interactive functionality
document.querySelectorAll(".movie-card").forEach((card) => {
card.addEventListener("click", () => {
const title = card.querySelector(".movie-title").textContent;
alert(`🎬 Now playing: ${title}`);
});
});
// Add resize functionality (simulated)
document.querySelectorAll(".container-demo").forEach((container) => {
const handle = document.createElement("div");
handle.className = "resize-handle";
container.appendChild(handle);
let isResizing = false;
handle.addEventListener("mousedown", (e) => {
isResizing = true;
e.preventDefault();
});
document.addEventListener("mousemove", (e) => {
if (isResizing) {
const rect = container.getBoundingClientRect();
const newWidth = e.clientX - rect.left;
const newHeight = e.clientY - rect.top;
if (newWidth > 200 && newHeight > 300) {
container.style.width = newWidth + "px";
container.style.height = newHeight + "px";
}
}
});
document.addEventListener("mouseup", () => {
isResizing = false;
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.