Foros del Web » Creando para Internet » CSS »

mostrar un texto dentro de imagen con on mouse over

Estas en el tema de mostrar un texto dentro de imagen con on mouse over en el foro de CSS en Foros del Web. Hola, me gustaría saber cómo puedo hacer que en una imagen, al hacer on mouse over aparezca un texto (sin hacerlo como imagen), una div ...
  #1 (permalink)  
Antiguo 17/08/2011, 01:49
 
Fecha de Ingreso: marzo-2004
Ubicación: La Rioja (España)
Mensajes: 111
Antigüedad: 13 años, 7 meses
Puntos: 1
mostrar un texto dentro de imagen con on mouse over

Hola, me gustaría saber cómo puedo hacer que en una imagen, al hacer on mouse over aparezca un texto (sin hacerlo como imagen), una div con el icono del ojo y la palabra "ver" y un fondo semi transparente negro, les pongo una imagen para explicarme mejor. ¿pueden ayudarme?:



un saludo y gracias por adelantado
  #2 (permalink)  
Antiguo 17/08/2011, 02:09
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 3 meses
Puntos: 269
Respuesta: mostrar un texto dentro de imagen con on mouse over

tomemos por caso este html

Código HTML:
Ver original
  1. <div id="caja">
  2. <p id="texto">lorem ipsum... link, img, etc</p>
  3. </div>

luego si lo encaras solo con css, podes hacer esto:
Código CSS:
Ver original
  1. #caja{background:url("ruta/imagen.xxx") 0 0 no-repeat; /*otros estilos*/}
  2. #texto{display:none;} /*ocultas el contenido*/
  3. #caja:hover #texto {display:block;} /*lo mostras cuando haces hover en #caja*/
No se si funcionará en ie7-, creo que el bug de ":hover" lo solucionas con esta librería: http://blog.unijimpe.net/ie5-ie6-estandar-con-ie7js/

Este tipo de cosas se suele hacer con javascript, en mi caso uso jquery, este código te irá bien:
Código Javascript:
Ver original
  1. /*entre <head> o en un archivo externo*/
  2. $(document).ready(function(){
  3. $("#caja").hover(
  4. function(){
  5. $("#texto").fadeIn("slow");
  6. },
  7. function(){
  8. $("#texto").fadeOut(300); /*300 milisegundos*/
  9. }
  10. );
  11. });

Saludos.

me olvidaba:
para el fondo transparente podes usar la propiedad opacity o un fondo png transparente repetido.

Última edición por cristian_cena; 17/08/2011 a las 02:16
  #3 (permalink)  
Antiguo 17/08/2011, 04:01
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 3 meses
Puntos: 1567
Respuesta: mostrar un texto dentro de imagen con on mouse over

Esta solucion funciona, valiendote de css y jQuery

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ar">
  3. <meta charset="utf-8" />
  4. <title>XHtml5</title>
  5. <style type="text/css">
  6. div#fondo{
  7. width: 460px;
  8. height: 358px;
  9. background-image: url(poster.jpg);
  10. }
  11. div#contenido{
  12. position: relative;
  13. top: 0px:
  14. left: 0px;
  15. background-color: #000;
  16. opacity: 0;
  17. -moz-opacity: 0;
  18. width: 460px;
  19. height: 358px;
  20. vertical-align: middle;
  21. text-align: center;
  22. display: table-cell;
  23. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  24. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  25. }
  26.  
  27. div#contenido:hover{
  28. opacity: 0.8;
  29. -moz-opacity: 0.8;
  30. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  31. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  32. }
  33.    
  34. div#det {
  35. position:relative;
  36. opacity: 1;
  37. -moz-opacity: 1;
  38. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  39. filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  40. color: red;
  41. font-family: arial, sans-serif;
  42. font-size: 13pt;
  43. visibility: hidden;
  44. vertical-align: middle;
  45. }
  46. <!--[if IE 7]>
  47. <style type="text/css">
  48. div#det{
  49. margin-top: 160px;
  50. }
  51. </style>
  52. <![endif]-->
  53.  
  54. <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
  55. </head>
  56. <div id="fondo">
  57. <div id="contenido"><div id='det'>detalles de la foto<br />detalles de la foto<br /><br /><a href='detalles.html'>ver más</a></div></div>
  58. </div>
  59. <script type="text/javascript">
  60. $("#contenido").mouseover(function () {
  61. $("#det").css('visibility','visible');
  62. $("#det").css('z-index','999');
  63. $("#contenido").css('z-index','1');
  64. });
  65. $("#det").mouseout(function () {
  66. $("#det").css('visibility','hidden');
  67. });
  68. </body>
  69. </html>

El unico problema es el centrado vertical en ie7, para el cual hay que poner el margen superior para la capa que contiene los detalles a traves de un condicional


demo

http://foros.emprear.com/css/texto-s...en/efecto.html

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: fondo, mouse
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:13.