JSF/RichFaces- Exibir imagem em tamanho real onMouseOver

Front-end
#1

Boa tarde.

Tenho uma página com algumas fotos, e gostaria que quando o mouse fosse posto sobre um imagem, ela fosse apresentada em tamanho real.

<h:panelGroup class="album" style="align: center;" layout="block">
			    	<ui:repeat value="#{consultdocsfotosmb.fotosBytes}" var="foto">
					    <h:panelGroup class="imageSingle" style="padding-left: 30px" layout="block">
					        <h:panelGroup class="image" layout="block">
					        	<a4j:mediaOutput 	element="img" cacheable="false" 
					        						session="false" 
					        						createContent="#{consultdocsfotosmb.getThumb}" 
					        						value="#{foto.id}" 
					        						mimeType="image/jpeg" />
					        </h:panelGroup>
					        <h:panelGroup class="check" layout="block">
					        	<h:selectBooleanCheckbox/>
					        	<h:outputText value="Anexar Relatório"/> 
					       	</h:panelGroup>
					    </h:panelGroup>
				    </ui:repeat>
			    </h:panelGroup>

Eu tentei seguir o exemplo desse link: http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=jquery, mas não deu certo.
Cheguei a copiar exatamente o código fonte do exemplo e modificar somente as imagens, e não funcionou.

Alguém sabe de algum outro método pra fazer isso?
Estou utilizando JSF 1.2 RichFaces 3.3.3.

#2