CSS to make GIF play/pause

gif.css

.fix-nav {
  // the container for static image and gif
	.gif-container {
    // the play icon
		.fa-play {
			color: #333;
			font-size: 2.3rem;
			position: absolute;
			top: calc(50% - 2.5rem);
			left: calc(50% - 2.5rem);
			background: rgba(200,200,200,.6);
			border-radius: 50%;
			padding: 20px;
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 20px;
		}
    // the pause icon
		.fa-pause {
			display: none;
			color: #333;
			font-size: 2.3rem;
			position: absolute;
			top: calc(50% - 2.5rem);
			left: calc(50% - 2.5rem);
			padding: 20px;
			width: 60px;
			height: 60px;
			text-align: center;
			line-height: 20px;
		}
		.gif {
			display: none;
		}
		&:hover {
			.gif {
				display: inline;
			}
			.static {
				display: none;
			}
			.fa-play {
				display: none;
			}
			.fa-pause {
				display: inline;
			}
		}
	}
}