Ventana Emergente Solo HTML5 y CSS3

El código que a continuación se muestra te permite crear una ventana emergente, la cuál se muestra cuando el usuario acerca el puntero del ratón sobre la ficha informativa. Y desaparece cuando el ratón sale de la misma.

IMAGEN

HTML5

< div id="contenedor">
< section class="ficha">
< aside class="txt">
< h3>JWEBMX< /h3>
< p>Blog Front-end de HTML5, CSS3, JS.


Admistrado por: < a href="https://twitter.com/PabloSagoz" target="_blank">@PabloSagoz< /a>< /p>

< div class="hidePnl">< iframe id="hideiframe" src="//instagram.com/p/aUkgOhKap8/embed/" width="306" height="355" frameborder="0" scrolling="no" allowtransparency="true">< /iframe>< /div>
< /section>
< /div>


CSS3

*{font-family: 'Ubuntu', sans-serif;} body{text-align: center;} #contenedor{ padding: 1.5em; } a{ font-size: 15px; text-shadow: 20px 12px 12px rgba(162, 154, 154, 0.60); color: #034778; text-decoration: none; } .ficha{ height: 150px; width: 140px; margin: 5px; -webkit-animation: borderstyle 4s infinite; position: relative; float: left; overflow: hidden; cursor: pointer; background: rgba(20%, 20%, 20%, 0.35); box-shadow: 10px 10px 15px rgba(127, 122, 122, 0.35); } .txt { max-width: 100%; height: 30px; margin: 0px; text-align: center; border-radius: 15px; } .txt h3{ margin: 0px; padding: 0px; width: 100%; height: 20px; color: #034778; text-align: center; } .txt p{ padding: 5px; font-size: 14px; color: #000; } #hideiframe{ -webkit-animation: borderstyle 4s infinite; box-shadow: 10px 10px 15px rgba(127, 122, 122, 0.75); } .hidePnl{ transform:translate(150px,50px); -webkit-transform:translate(150px,50px); -o-transform:translate(150px,50px); -moz-transform:translate(150px,50px); -ms-transform:translate(150px,50px); } .ficha:hover{ overflow: visible; } @-webkit-keyframes borderstyle{ 0%{ border-radius: 25px 0px 0px 0px; } 25%{ border-radius: 0px 25px 0px 0px; } 50%{ border-radius: 0px 0px 25px 0px; } 75%{ border-radius: 0px 0px 0px 25px; } 100%{ border-radius: 25px 0px 0px 0px; } }



DEMO

jwebmx
SE FELIZ , Y VUELVE PRONTO











Sí deseas ver el ejemplo completo de la imagen puedes descargarlo Aquí.

Entradas más populares de este blog

Geochart - Republica Mexicana

Imagen
Sencillo ejemplo de como utilizar el Geochart de los "Graficos de Google". Como se puede apreciar en la siguiente imagen el mapa muestra todos los estados de la republica mexicana, teñidos en distintos colores de los cuales indican la cantidad de población del país, ademas si se acerca el cursor ha alguno de ellos aparace un pequeño tooltip con el nombre del estado y la población del estado en el año 2013.   ¿Como funciona geochart en este ejemplo? Lo primero que tenemos que hacer es referciar el api ajax de  google  charts con la siguiente linea script: < script type = 'text/javascript' src = 'https://www.google.com/jsapi' ></ script > Ahora si ya que tenemos refenciado la api, lo que continua es configurar el api para indicar que tipo de gráfico es que queremos presentar en nuestra pagina web, para eso utilizamos la siguientes lineas de codigo: //Cargar el API de visualización y el paquete GeoChart. google.load ( 'v
Leer más

TypeScript (Tipos De Datos)

Imagen
TypeScript es la solución que presenta Microsoft que nos permite trabajar con JavaScript como si fuera un lenguaje de programación orientado a objetos, así es un JavaScript que cuenta con su propio compilador. TypeScript se presenta como una tecnología escalable capaz de ofrecer clases, módulos e interfaces que nos permiten construir componentes robustos, algo que debemos entender antes de continuar es que TypeScript se desarrollo bajo la idea de “Starts from JavaScript, Ends with JavaScript”, esto quiere decir que nuestros archivos se codifican en un JavaScript regido por las reglas de la POO, y que cuando se compilan se crea una archivo con el JavaScript normal, esto permite que TypeScript puede utilizar código JavaScript existente e incorporar bibliotecas de JavaScript como jQuery, MongoDB, Node.js, y D3.js, y ser utilizado o extendido desde otro código o libreria JavaScript.  Básicamente el compilador del TypeScript se encarga de limpiar el código y dejar simplemente
Leer más

JS convertir una cadena de texto en mayúsculas, minúsculas o solo la primer letra de cada texto

Imagen
Ejemplo en JS con Jquery de como podemos transformar las letras de un texto ingresado en un texto capitalizad o en cada una de sus palabras o solo la primer letra de todo el texto, convertir en mayúsculas todo el texto o todo en minúsculas . <html>     <head></head>     <body>         <input type= "text"  class= "capitalizeText"  placeholder= "Texto Capitalizado" /><br><br>         <input type= "text"   class= "firstLetterText"  placeholder= "Primer letra mayúsculas" /><br><br>         <input type= "text"  class= "toUpperText"  placeholder= "TODO MAYÚSCULAS" /><br><br>         <input type= "text"  class= "toLowerText"  placeholder= "todo minúsculas" /><br><br>                  <script src=" https://ajax.googleapis. com/ajax/libs/jquery/3.1.1/ jque
Leer más