<div class="live-image">
<blockquote>Invert, always invert.<cite>Carl Jacobi</cite></blockquote>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/briansahagun/40529664241/in/album-72157692896506845/" title="Props"><img src="https://farm5.staticflickr.com/4744/40529664241_f381cc6d54_h.jpg" width="1600" height="1067" alt="Props"></a>
</div>
body{margin:0;background-color:black;}
.live-image
{
position: relative;
overflow: hidden;
}
.live-image blockquote
{
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
margin: 0;
padding: 1em;
color: white;
font-size: 3em;
font-family: georgian;
font-weight: normal;
opacity: .75;
}
.live-image cite
{
display: block;
margin-top: .5em;
font-size: .75em;
}
.live-image img
{
display: block;
transition: all 10s ease-in-out;
}
.live-image:hover img
{
opacity: 1;
transform: scale(1.25) rotate(2.5deg);
}
.live-image img
{
max-width: 100%;
height: auto;
opacity: .5;
}
Also see: Tab Triggers