Foros del Web » Creando para Internet » CSS »

Superponer icono pequeño a una imágen

Estas en el tema de Superponer icono pequeño a una imágen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/05/2006, 06:41
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
Superponer icono pequeño a una imágen

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!
__________________
sergiold
  #2 (permalink)  
Antiguo 24/05/2006, 12:34
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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
  #3 (permalink)  
Antiguo 24/05/2006, 15:57
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
De acuerdo

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!
__________________
sergiold
  #4 (permalink)  
Antiguo 24/05/2006, 17:36
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
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
  #5 (permalink)  
Antiguo 24/05/2006, 17:53
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
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!
__________________
sergiold
  #6 (permalink)  
Antiguo 24/05/2006, 17:58
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
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
  #7 (permalink)  
Antiguo 24/05/2006, 18:15
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
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,
__________________
sergiold
  #8 (permalink)  
Antiguo 26/05/2006, 21:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
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.

  #9 (permalink)  
Antiguo 27/05/2006, 04:35
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
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)  
Antiguo 27/05/2006, 18:40
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
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.
__________________
sergiold
  #11 (permalink)  
Antiguo 28/05/2006, 17:34
Avatar de g05l21  
Fecha de Ingreso: mayo-2006
Mensajes: 76
Antigüedad: 11 años, 6 meses
Puntos: 1
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!
  #12 (permalink)  
Antiguo 29/05/2006, 11:07
 
Fecha de Ingreso: octubre-2004
Mensajes: 751
Antigüedad: 13 años, 2 meses
Puntos: 4
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,
__________________
sergiold
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:44.