玉到HTML / CSS

Question

我有这个我希望翻译成HTML的玉代码。我想我已经掌握了大部分内容，但我无法弄清楚悬停部分。

对于我想要转换为HTML的Jade： http://codepen.io/jzhang172/pen/Nqevge

我的尝试： http://codepen.io/jzhang172/pen/zGydZv

＆＃13;

＆＃13;

*{
	transition: all 250ms ease-in-out;
}
.container{
	position: absolute;
	transform: translateY(-50%) translateX(-50%);
	top: 50%;
	left: 50%;
}
.block
{
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-family: 'Playfair Display', serif;
}
	.block .citation
{
		font-size: 25px;
		line-height: 35px;
}
	.block .author
{
		font-family: 'Roboto', sans-serif;
		color: #838eca;
		text-transform: uppercase;
		font-size: 10px;
		letter-spacing: 2px;
		line-height: 35px;
		transform: translateY(-50px);
		opacity: 0;
}
.third
{
	position: relative;
}
.third .citation{
		transform: translateX(0);
}
	.third .author
{
		bottom: 10px;
		position: absolute;
		right: 0;
		opacity: 0;
}
	.third .author:hover .citation
{
			transform: translateX(-70px);
    }
	.third .author:hover .author{
			right: -50px;
			opacity: 1;
			color: #ea8273;
    }

＆＃13;

<div class="container">
<div class ="block third">
    <p class="citation">"Guess what. A quote."</p>
		<p class="author"> - and the author -
</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Jade有一个内置工具可以做到这一点

只是做：

jade＆＃34; filename.jade＆＃34;在您的文件的文件夹中，它将呈现.html文件。