Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Colocar imagen sobre otra | kaialexis.blogspot.com</title>
<style type="text/css">
/*Imagen de fondo*/
.fondo_zeus{
position:absolute;
z-index:1; /*valor 1:Será la que se vea más al fondo*/
}
  
/*Las imagenes pequeñas las meteremos dentro de un div llamado cartas*/
.cartas img{/*modifica todas las imagenes al interior del div cartas*/
cursor:pointer;/*cambiamos el cursor al de la mano(link)*/
position:absolute;/*todas las imágenes dentro de este div tendrán posición absolute*/
}
​
/*imagen de Thor (la de la izquierda)*/
.thor{
margin-top:85px;/*margen superior respecto al comienzo del div*/
margin-left:-30px; /*negativo, para que se posicione antes del comienzo del div(es el efecto para que salga del fondo)*/
}
​
/*imagen de Sigfried (la del centro)*/
.sigfried{
margin-top:90px;
margin-left:36px;
}
​
/*imagen de thor (la de la derecha)*/
.kronos{
margin-top:100px;
margin-left:76px;
}
</style>
<script type="text/javascript">
function cambiozindex(ev){
   var indice_original=parseInt(ev.style.zIndex);  
   ev.style.zIndex=indice_original+7;
}
 function regresazindex(ev){
   var indice_original=parseInt(ev.style.zIndex);
   ev.style.zIndex=indice_original-7;
}
</script>
</head>
<body>
​
  <div style="height: 250px; margin: auto; width: 320px;">
<img border="0" class="fondo_zeus" height="240" src="http://3.bp.blogspot.com/-G95kr665JoE/Th-jI9jCs8I/AAAAAAAABLE/_nliROi4rXY/s320/Zeus%2BWallpaper%252CMitos%2By%2BLeyendas%252C%2BSalo%252C%2BMauricio%2BHerrera%252C%2BHel%25C3%25A9nica.jpg" width="320" />
​
<div class="cartas">
<img border="0" class="thor" height="120" onmouseout="regresazindex(this);" onmouseover="cambiozindex(this);" src="http://4.bp.blogspot.com/-l-EauGiwqxs/Th-ldY8RD1I/AAAAAAAABLM/xAzbRzJZTYU/s120/Thor%252C%2BMitos%2By%2BLeyendas%252C%2BSalo%252C%2BMauricio%2BHerrera%252C.png" style="z-index: 666;" width="96" />
​
<img border="0" class="sigfried" height="100" onmouseout="regresazindex(this);" onmouseover="cambiozindex(this);" src="http://4.bp.blogspot.com/-eB0UQxQc74Q/Th-m9qpwzwI/AAAAAAAABLU/-vABiWIA-eE/s120/Sigfried%252C%2BMitos%2By%2BLeyendas%252C%2BSalo%252C%2BMauricio%2BHerrera%252C%2BBarbarie.png" style="z-index: 667;" width="76" />
​
<img border="0" class="kronos" height="120" src="http://3.bp.blogspot.com/-V8HSEiuAME4/Th-opQ_YVMI/AAAAAAAABLc/gKYfaI6zgDs/s120/Kronos%252C%2BMitos%2By%2BLeyendas%252C%2BSalo%252C%2BMauricio%2BHerrera%252C%2BHel%25C3%25A9nica.png" style="z-index: 668;" width="92" />
​
</div>
  
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers