Descifrar un codigo html css para aplicar en mi eshop

[gerard094]

Buenas tardes, estoy tratando de desencriptar el codigo de este sitio:
http://www.spreadshirt.com/giraffe-w...047PA174X78Y31

La superposición de imagenes que hay en la galería de productos, si ven bien se puede observar que hay 2 imagenes, la remera y el logo de la remera.

Estoy tratando de averiguar como lograr eso, estoy diseñando el sitio con Mystile y Woocommerce en Wordpress.

Pero me interesaría saber como lograr eso, supongo que es puro codigo.

[vis97c]

efectivamente es puro codigo, al principio pense que era el mismo codigo para cada girafa pero me percate que en cada imagen tenia posicion y tamaño distinto asi que revise el codigo y me di cuenta que era una larga cascada de comandos y probablemente el programador o creador de la pagina no lo alla hecho manualmente. para el usuario o persona que maneja la pagina se debe haber creado un sistemas mas intuitivo con el que le otorga tamño y pocison a la girafa y tras guardarlo el sistema ha de crear el codigo. AQUI HAGO UNA DESCOMPOSICION DE LA PARTE GENERAL DEL CODIGO:

EL CONTENEDOR SECUNDARIO REPRESENTA CADA UNA DE LAS CAMISETAS DEL SLIDER

INICIO CONTENEDOR PRINCIPAL

<div style="overflow: hidden; position: absolute; left: 52px; width: 496px; height: 166px;" class="left offset_right_small" id="products_slider_content">

<div style="position: absolute; width: 496px;">

INICIO CONTENEDOR SECUNDARIO

<div data-tracking="Same Design Products" id="vp-proposal-preview-0" class="left currentSelection" style="position: absolute; width: 120px; height: 120px; top: 0px; left: 2px;" title="Men's Heavyweight T-Shirt">
<div style="position: relative;">

<div class="left" style="position: absolute; width: 120px; height: 120px; visibility: visible;">

INICIO IMAGEN FONDO

<img width="120" height="120" src="http://image8.spreadshirt.com/image-server/v1/productTypes/109/views/1/appearances/299,width=120,height=120/Men-s-Heavyweight-T-Shirt.jpg" class="qa">

FIN IMAGEN FONDO

INICIO DEL AREA DONDE POSIBLEMENTE ESTE EL CODIGO DE POCISION

<div id="vp-view206" tabindex="0" style="width: 120px; height: 120px; position: absolute; top: 0px; left: 0px; outline: none;">
<svg width="120" height="120">
<defs></defs>
<g fill="rgb(0, 0, 0)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" dojoGfxStrokeStyle="Solid" transform="matrix(0.16586052,0.00000000,0.00000000 ,0.16586052,0.00000000,0.00000000)">
<g fill="rgb(0, 0, 0)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" dojoGfxStrokeStyle="Solid" transform="matrix(1.00000000,0.00000000,0.00000000 ,1.00000000,198.96200000,93.02140000)">
<g fill="rgb(0, 0, 0)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" dojoGfxStrokeStyle="Solid" transform="matrix(1.00000000,0.00000000,0.00000000 ,1.00000000,78.57521959,31.35274206)">
<g fill="rgb(0, 0, 0)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" dojoGfxStrokeStyle="Solid">
<g fill="rgb(0, 0, 0)" fill-opacity="1" fill-rule="evenodd" stroke="rgb(0, 0, 0)" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" dojoGfxStrokeStyle="Solid" transform="matrix(0.84563848,0.00000000,0.00000000 ,0.84563848,0.00000000,0.00000000)">

INICIO IMAGEN LOGO

<image fill-opacity="0" stroke="none" stroke-opacity="0" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" x="0" y="0" width="ANCHO" height="ALTURA" preserveAspectRatio="none" xlink:href="http://image18.spreadshirt.com/image-server/v1/designs/12222929,height=100/Giraffe-With-Glasses.png"></image>

FIN IMAGEN LOGO

</g></g></g></g></g></svg>

INICIO DEL AREA DONDE POSIBLEMENTE ESTE EL CODIGO DE POCISION

</div></div>

<div class="prod-label">Men's Heavyweight T-Shirt</div>
<div class="gwt_loader loading_slider hide" style="">
<img class="gwt-Image" src="/sprd-mp/resources/ajax-loader.gif">
</div>

FIN CONTENEDOR SECUNDARIO

</div></div>

FIN CONTENEDOR PRINCIPAL

</div></div>

NO PUDE IDENTIFICAR CUALES DE LOS VALORES DEFINIAN LA POCISION DE EL LOGO, Y CREO QUE NO SOY EL INDICADO PARA RESOLVER LO DE LA CONVERSIONA WORDPRESS, NO ES MI AREA.

[chuekeron]

Si tenes un conocimiento de html, es mas sencillo hacerlo de 0 que tratar de sacar el codigo de ese sitio. Y mucho mas productivo tambien.
Con respecto a la forma en que se muestran los productos hay cientos de scripts con javascript y otras librerias como jQuery para lograr eso.

[gerard094]

Intentaré seguir investigando, soy muy novato en HTML, y me estan pidiendo lograr eso de usar las mismas imagenes y superponer 2 en 1 foto de galeria, para ahorrar espacio, así que vere qe hago. Gracias