Superponer icono pequeño a una imágen

sergiold · #1 (**permalink**) 23/05/2006, 05:41

Hola a todos de nuevo,

necesito un poco de ayuda para saber cómo conseguir el fecto de esta página:

http://themes.wordpress.net

El efecto al que me refiero es el de las imágenes superpuestas a cada thumb indicando las diferentes opciones que hay.

Gracias y saludos!

kahlito · #2 (**permalink**) 24/05/2006, 11:34

Hola sergiold , creo que podrias hacer ese efecto jugando con el z-index de cada elemento poniendo uno encima de otro, y luego para el efecto de opacidad y que al pasar por encima la imagen tenga su color correcto lo puedes hacer con css con hover

Saludosss

sergiold · #3 (**permalink**) 24/05/2006, 14:57

OK. Gracias por responder. Intentaré hacerlo como dices. Una pequeña duda: hay que poner algún position:absolute, relative o alguno de estos. Es que nunca me aclaro!

Saludos y gracias!

g05l21 · #4 (**permalink**) 24/05/2006, 16:36

A ver, aquí tienes el HTML de cada imagen

Código HTML:

 <li class="thumb">
      <a title="More info on Movement"><img width="150" height="112" src="./wordpress/wp-content/thumbs/150-movement.png" alt="More info on Movement"/></a>
      <div class="metadata"><a  title="Download">Download</a><a href= class="demo" title="Demo">Demo</a><a class="info" title="More info">More info</a></div>
    </li>

y aquí el css de esas etiquetas.

Código HTML:

.thumb a {
  border: 1px solid #ccc;
  display: block;
  padding: 5px;
}
.thumb a:hover {
  background: #ff6;
  border: 1px solid #ff6;
}
.thumb a img {
  border: none;
}

.thumb.current a {
  background: #ff6;
  border: 1px solid #ff6;
}
ul#randomThemes {
  display: inline;
  clear: both;
  list-style-type: none;
}

#randomThemes li {
  display: inline;
  position: relative;
  float: left;
  margin-left: 20px;
}

#randomThemes li a {
  margin: 10px 0;
}

#randomThemes .metadata {
  position: absolute;
  top: 115px;
  left: 90px;
  text-indent: -3000px;
}

#randomThemes .metadata:hover {
  opacity: 1;
}

#randomThemes .metadata a {
  display: inline;
  position: relative;
  border: none;
  float: left;
  line-height: 1.6em;
  -khtml-opacity: .4;
  filter: alpha(opacity=40);
  opacity: .4;
  padding: 0 2px;
  margin: 0;
  width: 20px;
}

#randomThemes .metadata a:hover {
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}

#randomThemes .metadata a:hover { 
  /*background-color: #ff6;*/
}
#randomThemes a.info {
  background: url( wrc-images/info.gif ) no-repeat center center;
}

#randomThemes a.demo {
  background: url( wrc-images/demo.gif ) no-repeat center center;
}

#randomThemes a.download {
  background: url( wrc-images/download.gif ) no-repeat center center;
}

No se si he puesto de más o de menos, simplemente he hecho un copy/paste

De todos modos te recomiendo que uses firefox con el plugin webdeveloper, que para estas cosas viene muy bien (el código con un Ctrl+Shift+U y el css con un Ctrl+Shift+C te salen directamente) además de tener otras muuchas utilidades... (Parezco un anuncio)

Ya nos comentarás como queda la cosa (que la verdad me parece bastante interesante para incluir en algún que otro lado)

Saludos

sergiold · #5 (**permalink**) 24/05/2006, 16:53

Gracias voy a probar.

Cuando tenga algo lo pongo por aquí para que veais el resultado y le añado el código.

Saludos y gracias de nuevo!

g05l21 · #6 (**permalink**) 24/05/2006, 16:58

Por cierto "[TuTema] Directorio temático" tiene unos pequeños problemas con los php (algún ";" nos falta??? ;)

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ',' or ';' in /home/editorw/public_html/tutema/temp/templates/en^%%72^72D^72DAF6E8%%main.tpl.php on line 53

sergiold · #7 (**permalink**) 24/05/2006, 17:15

Si

...

La verdad es que lleva así un mes y medio o dos meses pero no me he dedicado a arreglarlo por falta de tiempo y por falta de interés

. Ahora mismo estoy trabajando en otro proyecto y este no me convencia.

De todas formas gracias por el aviso. La verdad es que algo tendré que hacer... Ya veré.

Saludos,

kahlito · #8 (**permalink**) 26/05/2006, 20:12

Cita:

Iniciado por sergiold

OK. Gracias por responder. Intentaré hacerlo como dices. Una pequeña duda: hay que poner algún position:absolute, relative o alguno de estos. Es que nunca me aclaro!

Saludos y gracias!

Depende de como tengas el resto del diseño o como quieras poner algo así en tu web, a veces ni hace falta poner absoluta o relativa.

sergiold · #9 (**permalink**) 27/05/2006, 03:35

OK! Gracias. Entoces supongo que no tendré que ponerlo porque no hay nada en mi css con un position específico.

Esta tarde intentaré hacerlo haber qué consigo. Gracias de nuevo a todos. Ya os mostraré el resultado.

Saludos,

sergiold · #10 (**permalink**) 27/05/2006, 17:40

Bueno, he estado trabajando esta tarde con esto y la siguiente página es la muestra del resultado final:

http://www.editor-web.com/Pruebas/lista_imagenes.php

Lo he probado tanto con Internet Explorer como con Firefox y funciona en ambos. Sin embargo para que funcionara en el primero he tenido que añadir un poco de JavaScript porque parece que no reconoce el :hover si no es en un enlace.

De todas formas lo he arreglado mediante un onmouseover y un onmouseout. A parte de esto he puesto un poco más de opacidad a las opciones porque me parecia que no se veian lo suficiente.

Espero que os guste el resultado. Para cualquier sugerencia y/o duda ya sabeis donde estoy.

Saludos,

PD. Muchas gracias a kahlito y a g05l21 por vuestra ayuda.

g05l21 · #11 (**permalink**) 28/05/2006, 16:34

Queda genial. Da por seguro que te plagiaré la idea y la guardaré en mis "apuntes" por si algún día la necesito

Un saludo y un placer!

sergiold · #12 (**permalink**) 29/05/2006, 10:07

Cita:

Iniciado por g05l21

Queda genial. Da por seguro que te plagiaré la idea

Me alegro de que te guste. "Plagia la idea" todo lo que te apetezca!

Saludos,