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.
Epígrafes: CSSSiempre estamos en contacto con usted
- +7 (906) 272-38-19
Tel./ WhatsApp/ Viber - info@cruelten.ru
- Cruelten
- Cruelten
- Cruelten
Antes de contactar con los contactos que aparecen aquí, le pedimos que compare los precios y condiciones de nuestros competidores.
Esto le dará Una idea amplia de cuánto cuesta los servicios en el desarrollo del sitio llave en mano, cuánto tiempo lleva crear una tienda en línea o un sitio de tarjeta de visita.
No tardaremos más de tres semanas. Gracias.