Tutorial:Imagen con menu oculto


Hola   ,hoy boy a mirar una pelicula aorita y asique lo are rapido este tutorial n.n¡ es una imagen con menu oculto ,se vera asi debaras pasar el cursor por la imagen:

Home Tutoriales Créditos LINK

Aqui tu texto

si les gusto aqui el codigo,deberan pegarlo en un gadget -HTML/JAVASCRIPT

<center>
<style type="text/css">
.img-opaco{
background: #E8E6E6;
color: #000;
width: 270px;
height: 210px;
margin-top:-215px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-opaco:hover{
opacity:.7
}
</style>


<img src="Url de la imagen" width="270" />

<div class="img-opaco">
<center>
 <span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium;"><br />

<span id="nav" style="-webkit-transition: 1s; background-color: #ff3e96; border-radius: 5px; border: #000000 1px dashed; font-family: serif; font-size: 13px; padding: 2px;">

<a href="Url del link" style="-webkit-transition-duration: 0.5s; color: black; text-decoration: none;">Home</a></span>

<span id="nav" style="-webkit-transition: 1s; background-color: white; border-radius: 5px; border: #FF3E96 1px dashed; font-family: serif; font-size: 13px; padding: 2px;">

<a href="Url del link" style="-webkit-transition-duration: 0.5s; color: black; text-decoration: none;">Tutoriales</a></span>

<span id="nav" style="-webkit-transition: 1s; background-color: white; border-radius: 5px; border: #FF3E96 1px dashed; font-family: serif; font-size: 13px; padding: 2px;">

<a href="Url del link" style="-webkit-transition-duration: 0.5s; color: black; text-decoration: none;">Créditos</a></span>
<span id="nav" style="-webkit-transition: 1s; background-color: white; border-radius: 5px; border: #FF3E96 1px dashed; font-family: serif; font-size: 13px; padding: 2px;">

<a href="Url del link" style="-webkit-transition-duration: 0.5s; color: black; text-decoration: none;">LINK</a></span>

<span style="color: black; font-family: Purisa; font-size: x-small;"><b> <br /><br />

Aqui tu texto

</b></span>
</span> </center>
</div>
</center>

Bueno eso es todo n.n¡ mañana publicare mas cositas

6 comentarios :

  1. wow lunany que hermosisimo efecto si lo huso
    te doy creditos linda
    me encanta i love
    sipiiiiii
    sigue compartiendo esto me re encanta
    saludos

    ResponderEliminar
  2. ship kumy solo pones en añadir un nuevo gadget :3

    ResponderEliminar
  3. Me encanta este menu ><!!!!Lo voy a usar oki???Puse los credits!!

    ResponderEliminar
  4. ok Yuuki que bueno que te gusto n.n¡

    ResponderEliminar

Hola :3 Bienvenidos a Lunany-kawaii
Debera seguir las siguientes reglas:
-No insultos
-No spam
-Ni peleas
gracias ♥