On hover the image will flip to another image of your choosing. A logo is usually best.

• This can be done manually or you can use the advanced options in JCE editor (right click on the image) to get the effect.
• I would also try and get the images to be the same size to keep things smooth, at least the width should be the same.
• It is also advisable to put a bit of a border or gap on the image at the edges so it does not get cut of. this is not mandatory
• You can also add frames arounf the images. See the Image Frames article for the code.

HTML

<p style="text-align: center;">
	<img src="/images/modules/755/quality_150.png" alt="quality 150" style="margin: 10px;" onmouseover="this.src='/images/kb/2016/755/demo-logo-rollover.png';" onmouseout="this.src='/images/kb/2016/755/quality_150.png';" />
	<img src="/images/modules/755/trash_150.png" alt="trash 150" style="margin: 10px;" onmouseover="this.src='/images/kb/2016/755/demo-logo-rollover.png';" onmouseout="this.src='/images/kb/2016/755/trash_150.png';" />
	<img src="/images/modules/755/administrator_150.png" alt="administrator 150" style="margin: 10px;" onmouseover="this.src='/images/kb/2016/755/demo-logo-rollover.png';" onmouseout="this.src='/images/kb/2016/755/administrator_150.png';" />
</p>