Using an image in a H1 logo as a letter

Hi,

I have the following logo:
https://jsfiddle.net/toolman/7trg9bod/3/

What I would like to do is replace the letter “o” with an image, but at the same time keep the “o” there for SE so the word reads “wow”.

Is there a way I can do this, or can I just insert an image normally?

Thanks

I would do something like this.


<span class="wow"><i class="cliphide">WoW</i><img src="images/lettero.gif" width="55" height="55" alt="WoW"></span>
.wow {
	font-family: museo-slab, serif;
	color: #fff;
	display: block;
	font-size: 55px;
	line-height: 55px;
	font-weight: 900;
	margin-top: -5px;
	position:relative;
}
.cliphide {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	z-index:-1;
	pointer-events:none;
}
.wow:before, .wow:after {
	content:"W";
	display:inline-block;
	vertical-align:middle;
}
.wow img {
	display:inline-block;
	vertical-align:middle;
}