<div class="container"> <img src="https://images.unsplash.com/photo-1432059964050-d4eba2ef368a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1dbc3d58047ce558b7820745a072b26"> <div class="two"> <h1>I <span> ♥ </span> coffee</h1> </div> </div>
.container { width: 100vw; height: 100vh; .two { width: 90vw; height: 90vh; top: 5vh; left: 5vw; border: 2px solid #dcdcdc; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; } } img { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } h1 { color: #fff; font-size: 4em; span { color: #681a1a; display:inline-block; } } .scaledIt { -webkit-animation: scaleUp .2s infinite; -moz-animation: scaleUp .2s infinite; -o-animation: scaleUp .2s infinite; animation: scaleUp .2s infinite; } @-webkit-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @-moz-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @-o-keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } } @keyframes scaleUp { 0% { transform:scale(1); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } }
$('span').addClass('scaledIt');