如何用CSS实现剧透报价？

我blockquote喜欢这样的:

Soopah sekkrit!

我想隐藏它,只有当用户将鼠标悬停在它上面时才显示它.我现在正在用JS做这件事:

blockquote.addEventListener('mouseover', function() {
    this.style.height = this.offsetHeight + 'px';
    this.dataset.contents = this.innerHTML;
    this.innerHTML = '';
});
blockquote.addEventListener('mouseout', function() {
    this.style.height = '';
    this.innerHTML = this.dataset.contents;
});

使用CSS有更好的方法吗？

它必须background-color使用自定义颜色保持其内容,大小和内容.如果可能的话,我也想给它制作动画,使内容逐渐淡出.

这与我在SOUP中使用的内容非常相似:

.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }

.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }

/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }

  Soopah sekkrit text with code and links and  images!
  
You can also have paragraphs in here.
  
And lists too!
  
Even nested spoilers work!

.spoiler:not(:hover)

.spoiler:not(:hover) *

.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler:not(:hover) * { background: transparent }

code { padding: 2px; background: #bbb }
a { color: #00f }

Hover: 
Some stuff and a colored link and some code!