Practica de hover

Ver el tema anterior Ver el tema siguiente Ir abajo

Practica de hover

Mensaje por Melyed el Dom Jun 28, 2015 10:56 pm

contenido oculto




Código:
<div style="width: 100px; height: 100px; background: #2EA5C9;" id="cajax"><div style="width: 100px; height: 100px;background: #C92E55; color:black" id="caja2x">contenido oculto</div></div>

<style>#caja2x{opacity: 0; transition: all 1s linear;} #caja2x:hover{opacity:1; transition: all 1s linear; }</style>

contenido oculto




Código:
<div style="width: 100px; height: 100px; background: #2EA5C9;" id="cajita"><div style="width: 100px; height: 100px;background: #C92E55; color:black" id="cajita2">contenido oculto</div></div>

<style>#cajita{overflow:hidden; transition: all 1s linear;} #cajita2{overflow:hidden; transition: all 1s linear; position:relative; left: -140px; }#cajita:hover #cajita2{left: -5px; }</style>


contenido oculto




Código:
<div style="width: 100px; height: 100px; background: #2EA5C9;" id="caja"><div style="width: 100px; height: 100px;background: #C92E55; color:black" id="caja2">contenido oculto</div></div>

<style>#caja2{opacity: 0; transition:ease-in-out 1s; transform: scale(1.5)} #caja2:hover{opacity:1; transition:ease-in-out 1s; transform: scale(1)}</style>

contenido oculto




Código:
<div style="width: 100px; height: 100px; background: #2EA5C9;" id="cajay"><div style="width: 100px; height: 100px;background: #C92E55; color:black" id="caja2y">contenido oculto</div></div>

<style>#caja2y{opacity: 0; transition:ease-in-out 1s; transform: scale(0.5)} #caja2y:hover{opacity:1; transition:ease-in-out 1s; transform: scale(1)}</style>





Código:
<div id="cajitarotate1"><div id="cajitarotate2"></div></div>

<style type="text/css">#cajitarotate1{background:#2EA5C9;width:100px;height:100px;overflow:hidden;} #cajitarotate2{background:#C92E55;width:100px;height:100px;overflow:hidden;position:relative;top:-14px;transition:ease-in-out 0.5s;transform: rotate(360deg);opacity:0;} #cajitarotate1:hover #cajitarotate2{transform: rotate(0deg);-webkit-transform: rotate(0deg);opacity:1;}</style>
avatar
Melyed
Admin

Mensajes : 52
Fecha de inscripción : 06/01/2014

Ver perfil de usuario http://melyed.foroac.org

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.