C/ Carteles de texto flotantes con Hover

C/ Carteles de texto flotantes con Hover

Buenas, en este tutorial que seria una continuación de esta entrada donde aprendimos a como añadir una caja flotante de texto, ahora aquí se tratara de como añadir un efecto hover al pasar el mouse, a petición por formulario de contacto.

Pues bien es sencillo, la etiqueta de este fue #fijo vamos a añadirle el hover de la siguiente manera: #fijo:hover { debe estar en el mismo <style> de la etiqueta.

Ahora vamos a complementar el hover y también a sumarle otro diseño a el fijo.

Si tienes el anterior borralo, este es el CSS.

#fijo { bottom: 20px; color: #FFF; font-size: 16px; padding: 0px 0px 17px 0px; position: fixed; left: 75%; text-align: center; text-shadow: 1px 1px 1px #000; width: 300px; z-index: 1; background-position: center; margin-left: auto; margin-right: auto; background: rgb(64, 72, 78); padding-bottom: 16px; padding-right: 0px; padding-left: 10px; border: 1px dashed #fff; } #fijo:hover { background: -webkit-gradient(linear,left bottom,left top,from(rgb(17, 20, 24)),to(rgb(11, 83, 119))) rgb(0, 0, 0); border: 1px solid rgb(5, 5, 5); -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; }



Ahora le podemos añadir una transición para que el efecto hover se aprecie de una manera mas llamativa, en este caso le incorpore un cambio de background 1s 2s, sustituye el hover anterior para colocar este:


#fijo:hover { background: -webkit-gradient(linear,left bottom,left top,from(rgb(17, 20, 24)),to(rgb(11, 83, 119))) rgb(0, 0, 0); border: 1px solid rgb(5, 5, 5); -webkit-box-shadow: 0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3; transition-property: opacity; transition-property: width; transition-property: z-index; transition-property: opacity, width, z-index; transition-duration: 1s; transition-delay: 1s; transition: [property] [duration] [timing-function] [delay]; ease-out; transition: opacity 1s linear 1s; transition-property: background-color, width; transition-duration: 2s, 3s; transition-timing-function: linear; -webkit-transition-property: background-color, width; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear; -moz-transition-duration: 2s, 3s; -moz-transition-timing-function: linear; background: #090; width: 200px; } Ahora el HTML, para este recomiendo colocarlo en el cualquier parte de el sidebar. <div id="fijo"> <a href="javascript:void(0);" onclick="document.getElementById('fijo').style.display='none';"> <img src="URL_IMAGEN" /> </a> <p> ....... el contenido ....... </p> </div> Ya con esto finalizamos el tutorial de hoy recuerda, que para estar mejor informado repasa el tutorial anterior.
El resultado visible en la entrada, /yo le edite el color y la posición/ →.

1. ¿Te gusto? → Síguenos en nuestra redes sociales
2. Si tienes dudas, comenta todas serán respondidas.

¡Compártelo!

Tweet