.note-count font-weight: 500;
Here’s a short HTML/CSS piece that mimics the look and feel of Tumblr’s “sensitive content” blur overlay, with interactive reveal logic.
/ optional image fade-in after reveal / .sensitive-cover.revealed .media-placeholder transition: filter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1); tumblr sensitive content
.blog-info flex: 1;
// bonus: keyboard accessibility for buttons (already native) // emulate Tumblr's feel: double posts with multiple sensitive. but it's safer to keep only button, //
<!-- SENSITIVE CONTENT BLOCK (exactly tumblr style) --> <div class="sensitive-wrapper"> <div class="sensitive-cover" id="sensitiveCover"> <!-- actual sensitive media (image placeholder) --> <img class="media-placeholder" src="https://images.unsplash.com/photo-1542751371-adc38448a05e?w=800&auto=format" alt="sensitive content preview (blurred until click)" loading="lazy" > <!-- overlay text + button --> <div class="sensitive-overlay"> <div class="sensitive-icon"> <span>⚠️</span> sensitive </div> <div class="sensitive-title">Content warning</div> <div class="sensitive-desc"> The following media may contain sensitive material.<br>Tap to reveal. </div> <button class="reveal-button" id="revealBtn">Show anyway →</button> </div> </div> </div>
if (coverOne && revealBtnOne) // Add reveal handler const revealHandlerOne = function(e) e.stopPropagation(); if (!coverOne.classList.contains('revealed')) coverOne.classList.add('revealed'); ; revealBtnOne.addEventListener('click', revealHandlerOne); // Optional: also clicking on overlay background could reveal, but to avoid confusion we only use button. // For better UX, but we respect typical tumblr: only click button reveals (some versions allow click overlay). // (good practice: also allow click on overlay if desired but we strictly follow button only) // however the 'sensitive-overlay' could be clicked? but it's safer to keep only button, // but many tumblr themes let you click anywhere on overlay. Let's add slight improvement: const overlayOne = coverOne.querySelector('.sensitive-overlay'); if (overlayOne) overlayOne.addEventListener('click', function(e) ); if (overlayOne) overlayOne.addEventListener('click'
/* glassmorphism overlay message – exactly like tumblr sensitive content modal */ .sensitive-overlay position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(8px); background: rgba(18, 20, 24, 0.72); border-radius: 20px; text-align: center; padding: 1.8rem; transition: opacity 0.2s ease, backdrop-filter 0.2s; pointer-events: auto; z-index: 10;