Como se hace esto ?

diaz22 · #1 (**permalink**) 30/05/2009, 16:47

Que uno pasa con el Mouse sobre la foto y Brinda informacion me gustaria saber como se hace ?

http://www.expomodacolombia.com/2009/aguja.php

hades87 · #2 (**permalink**) 30/05/2009, 16:54

Si miras un poco el código te darás cuenta que la foto esta en un div y dentro de este div esta puesta la descripción con otro div, este tiene la propiedad display:none, para que no se muestre.

Luego en el id del mismo div, que es nombre_participante, en la propiedad hover tiene un display block que les muestra el texto.

Si no lo has entendido muy bien es mejor que mires CSS, para entender los conceptos y así guiarte mejor y hacer cosas como las de la web que has mostrado

trasgukabi · #3 (**permalink**) 30/05/2009, 16:54

es una capa oculta, superpuesta a la foto, que se vuelve visible al pasar el ratón.

Código HTML:

 <div id="participante">
        <div id="nombre_participante">
			<b>Diana Patricia Galvis</b><br>
            Cencoes&nbsp;0 sem.<br>
            <i>Estrategia:</i> La compañia de Dios quien es el que da la fortaleza para hacer las cosas<br>
            <i>Elementos:</i> Lienzo; Tijeras; Piola        </div>

            <img src="img_aguja/dianapatriciagalvis.jpg" width="150" height="150">
        </div>

Código HTML:

#nombre_participante
{
width: 140px;
position: absolute;
z-index: 10;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
display: none;
height: 150px;
}
#participante:hover 
{
width: 140px;
position: absolute;
z-index: 10;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: transparent;
background-image: url(img/seccion_bg.png);
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0% 0%;
display: block;
height: 150px;
}

McPu · #4 (**permalink**) 30/05/2009, 16:59

fijate este codigo, si lo modificas un poquito ya tienes lo que quieres:

Código HTML:

<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box {
position:absolute; top:50px; left:50px; 
z-index:3;}

#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}

#box a span {display:none;}

#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
</head>
<body>

<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit amet</span></a></div>

</body>
</html>

Esto se ve asi aktuell.de.selfhtml.org/artikel/css/infobox/beispiel1.htm

fuente: aktuell.de.selfhtml.org/artikel/css/infobox/

diaz22 · #5 (**permalink**) 30/05/2009, 17:03

Gracias por la informacion

kseso? · #6 (**permalink**) 30/05/2009, 17:33

Pues es una pena que todos los usuarios de ie6 se queden sin esa información.
Si vas a implementarlo en tus páginas, yo optaría por menos divitis y colocar la imagen como un enlace (<a href="#"...) y esa información en un span.

Pero es sólo lo que yo haría