[HTML] 'bucare ' un div

  • Creatore Discussione Creatore Discussione zorro
  • Data di inizio Data di inizio

zorro

Utente Attivo
20 Ott 2014
334
22
28
ROMA
Salve a tutti,
ero un utilizzatore di Flash e sto cercando di ricreare (per quanto possibile, non sono molto esperto in questo) effetti Flash con i CSS. E' possibile creare all'interno di un div una sorta di 'buco', come avveniva appunto con i livelli (maschera e mascherato) di Flash, attraverso il quale visualizzare il contenuto sottostante ?
Grazie a tutti per l'aiuto e buon Natale


Zorro
 
Puoi utilizzare un'immagine gif o png con il buco trasparente messa sopra ad altri contenuti
 
stesso effetto anche con immagine
Codice:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style type="text/css">
.d01 {
    width: 300px;
    height: 300px;
    position: relative;
}
.im01, .om02 {
    position: absolute;
    top: 0;
    left: 0;
}
.im01 {
    z-index: 0;
}
.im02 {
    z-index: 999;
}
</style>
</head>

<body>
<div class="d01">
    <img class="im01" src="red-panda.jpg" width="300" height="300" alt=""/>
    <img class="om02" src="centerblur.png" width="300" height="300" alt=""/>
</div>
<div class="d01">
    <img class="im01" src="red-panda.jpg" width="300" height="300" alt=""/>
    <img class="om02" src="star.png" width="300" height="300" alt=""/>
</div>
</body>
</html>
 
Ultima modifica:
red-panda.jpg star.png centerblur.png
 
Grazie per la risposta Max 1, sto facendo delle prove con delle immagini mie ma non capisco come creare il 'buco'.
Ho fatto varil tentatlivi ma.......niente. Probabilmente sbaglio qualcosa
 
Qui trovi la DEMO
Qui scarichi il CODICE E IMMAGINI
 
Ultima modifica:
Grazie dell'aiuto, Max 1. Grazie al materiale che mi hai inviato sono riuscito nel mio intento:
sbagliavo nella creazione del 'buco' ma ora è tutrto OK!! Grazie ancora


Zorro
 

Discussioni simili