I am working on converting some Jade code into HTML. Everything is going smoothly except for the hover effect, which I can't seem to figure out.
Here is the Jade code I am trying to convert: http://codepen.io/jzhang172/pen/Nqevge
My progress so far: http://codepen.io/jzhang172/pen/zGydZv
*{
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;
}<div class="container">
<div class ="block third">
<p class="citation">"Guess what. A quote."</p>
<p class="author"> - and the author -
</p>
</div>
</div>