Muy sencillo de realizar el siguiente truco y se lleva acabo por medio de una tabla:

Ejemplo:

<table border="2" width="350" height="200"><tr height="80">
<td width="200"  bgcolor="#009900">&nbsp;</td>
<td bgcolor="#FFFFFF"><img src="Url-de-tu-imagen" /></td>
<td width="200"  bgcolor="#FF0000">&nbsp;</td>
</table>

Observaste bien, es una imagen el escudo.
Solo cambia el valor 400 de la url de la imagen por 98:
http://2.bp.blogspot.com/-wb1XMc0xmL4/TotvakB29II/AAAAAAAAGdk/vVFSRk3pgKo/s98/579px-Coat_of_arms_of_Mexico_svg.png

Como vez los experimentos del HTML, sencillos o no!

Los marcos son muy prácticos y encajan en donde sea.
Un ejemplo muy sencillo es el siguiente:



CSS:

<style type="text/css">
p {
  font:60px/90px Helvetica;
  color: #2E2E2E;
  text-align: center;
  border: 10px inset #FFFFFF;
  margin: 0 0 20px 0;
  }
  
.grid_4 { width:300px; }
.grid_8 { width:620px; }
.grid_12 { width:940px; }

.column {
 margin: 0 10px;
 overflow: hidden;
 float: left;
 display: inline;
}
.row {
 width: 960px;
 margin: 0 auto;
 overflow: hidden;
}
.row .row {
 margin: 0 -10px;
 width: auto;
 display: inline-block;
} 
</style>

HTML:

<div class="row">
<div class="column grid_12"><p>12</p></div>
</div>
<div class="row">
<div class="column grid_8"><p>6</p>
<div class="row">
<div class="column grid_4"><p>3</p></div>
<div class="column grid_4"><p>3</p></div>
</div>
</div>
<div class="column grid_4"><p style="line-height: 222px;">6</p></div>
</div>

Puedes generar muchos mas en este sitio...solo elige el tamaño de los marcos, lo descargas y listo:

Con motivo del 201 aniversario de la independencia de México realice un icono del escudo de la bandera mexicana con forma de ficha. Sus medidas son de 256x256px y por supuesto en formato PNG.

El efecto hover en una imagen genera el cambio de una imagen por otra al colocar el puntero.

2 ejemplos de muestra:

Si das clic en la imagen ya no se cambiara.
Este es el CSS:

h1 a {
display: block;
width: 100px; /* Ancho de la imagen hover */
height: 100px; /* Alto de la imagen hover */
}
h1 a:hover, h1 a:focus, h1 a:active {
background: transparent url(Url-de-imagen-2) no-repeat;
}
h1 a:hover img, h1 a:focus img, h1 a:active img {
background: transparent;
visibility: hidden;
}

Lo colocas antes de ]]></b:skin>.
Y el siguiente HTML lo colocas en una entrada.

<h1>
<a href="#">
<img src="Url-de-imagen-1" width="100" height="100" />
</a>
</h1>

Ancho y alto de la imagen visible: width="100" height="100"

Editas también la url de tus dos imagenes para que sean del mismo tamaño:

Por ejemplo cambias: http://4.bp.blogspot.com/-veORv1FEoE4/TebBrjdZ-sI/AAAAAAAAGIc/dOIbQAFI09I/s400/B%2Bde%2Bblogger%2Blogo.png

por: http://4.bp.blogspot.com/-veORv1FEoE4/TebBrjdZ-sI/AAAAAAAAGIc/dOIbQAFI09I/s100/B%2Bde%2Bblogger%2Blogo.png

Como ves es muy sencillo de relizarle efecto hover a las imagenes.

El siguiente ejemplo es una forma de cómo crear una perspectiva con CSS:
CSS:

#textoperspectiva {
  margin: auto;
  width: 40em;
  font-size: 70%;
  line-height: 2.9em;
  max-width: 90%;
  text-align: left;
}
#textoperspectiva p span {
  font-size: 1.1em;
}

HTML:

<div id="textoperspectiva"><p>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger<span>
B de blogger</span></span></span></span></span></span></span></span></span></span></p></div>