Como hacer un texto emergente sobre una imagen en html?
En un texto emergente en la imagen cuando se pasa sobre él con el ratón es un famoso y hermoso efecto visual, que a menudo se usan en el trabajo de muchos programadores. Crear es muy fácil. En mi tutorial voy a utilizar exclusivamente CSS3. Es fácil y sencillo.
Para que funcione necesitamos un archivo ejecutable y la imagen. El código que se debe insertar el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .text_my {display:none;} span:hover {word-spacing: 0} span:hover .text_my { width: 160px; padding: 10px; text-align: center; height: 30px; background: #121b2c; opacity: 0.85; font-size: 14px; display: block; position: absolute; margin-top: -50px; border-radius: 0 0 10px 10px; color: white; } </style> <span><img src="img/simple.jpg" alt="Simple JPG" /> <span class="text_my">Hello, World!!!</span > </span> |
Eso es todo. Ahora en la imagen se superpone un bloque de texto, en el que puede colocar todo lo que quieras. Es muy conveniente.
Contact Us
You are used to see a contact form here. Almost everyone does it. But while examining the behavior of people, we came to the conclusion that the form is completely unnecessary. In any case, it all comes down to discuss your project on WhatsApp. Why should we waste your time filling out various forms?