Talking Heads Interactive

Talking Head 1
Click to reveal more...
Talking Head 2
Click to reveal more...
Talking Head 3
Click to reveal more...
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; background-color: #101010; color: white; text-align: center; } .container { margin-top: 50px; } h1 { font-size: 2.5em; margin-bottom: 30px; } .card-container { display: flex; justify-content: center; gap: 20px; } .card { position: relative; width: 200px; height: 300px; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.3s ease; } .card:hover { transform: scale(1.05); } .head-image { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2em; opacity: 0; transition: opacity 0.3s ease; border-radius: 10px; } .card:hover .overlay { opacity: 1; } .card.revealed .overlay { background-color: rgba(0, 0, 0, 0.8); opacity: 1; color: yellow; font-size: 1.5em; transition: opacity 0.4s ease; } document.querySelectorAll('.card').forEach(card => { card.addEventListener('click', function() { this.classList.toggle('revealed'); }); });