yo haría esto
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Documento sin título
/*<![CDATA[*/
#imagen {
width:20px;
height:20px;
border:thin;
border-width:1px;
border-radius:1px;
-webkit-transition:all 2s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
/*]]>*/
<script type="text/javascript"> //<![CDATA[
function agrandar(){
document.getElementById('imagen').style.width='456px';
document.getElementById('imagen').style.height='473px';
document.getElementById('imagen').style.borderRadius='20px';
setTimeout('mostrar()', 1500);
}
function volver() {
document.getElementById('imagen').style.width='20px';
document.getElementById('imagen').style.height='20px';
document.getElementById('imagen').style.borderRadius='1px'
document.getElementById('mostrar').style.visibility = 'hidden';
document.getElementById('mostrar').style.opacity = '0.01';
}
function mostrar() {
var imagen = document.images[0].width;
if(imagen == 456){
document.getElementById('mostrar').style.visibility = 'visible';
document.getElementById('mostrar').style.opacity = '1';
}
}
//]]>
<img src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" alt="" name="imagen" /> <span style= "position:absolute; left: 480px; top: 146px; width: 210px; height: 41px; background-color:#0CF; padding:10px; border-radius:10px; visibility:hidden; opacity: 0.01; -webkit-transition:all 2s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease;"
id="mostrar">Pulse en la imagen para volver a su estado anterior.
</span>
Saludos