Lo que intentamos en esta ocasión es mostrar una imagen y sobre ella solapar una serie de enlaces. Algo muy sencillo pero que con un poco de CSS puede quedar bien y ofrecernos un resultado curioso.
Como utilidad se me ocurre que podría servir para colocar en la sidebar con algunos enlaces prioritarios para el sitio, que quedarían algo más destacados por la imagen que los va a acompañar. Eso o cualquier otra cosa que se os pueda ocurrir, of course.
El resultado sería este y pasando por encima de los enlaces veréis el efecto. Una tontada pero como decía, puede quedar bien según los casos.
Para conseguir esto tenemos que utilizar un par de cajas. Una que incluya lo que serán los enlaces (links) y otra padre que además de los enlaces contenga la imagen (imagelinks). En consecuencia el HTML quedaría así:
<div class="imagelinks">
<div class="links">
<a href="URL1">Inicio</a>|<a href="URL2">Bio</a>|<a href="URL3">Contacto</a>
</div>
<img src="URL_IMAGEN" />
</div>
<div class="links">
<a href="URL1">Inicio</a>|<a href="URL2">Bio</a>|<a href="URL3">Contacto</a>
</div>
<img src="URL_IMAGEN" />
</div>
Ahora ya sólo es cuestión de añadir nuestro CSS para hacer la magia:
.imagelinks {
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}
display: block;
position: relative;
width: 100%;
max-width: 300px;
margin: 0 auto;
padding: 0;
border: 4px solid black;
}
.imagelinks img {
max-width:100%;
border: 0;
vertical-align: top;
}
.links {
width: 100%;
position:absolute;
bottom:0;
text-align:center;
background: #FFFFFF;
-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
.links a {
display: inline-block;
padding: 8px;
color:#000000;
}
.links:hover {
zoom: 1;
filter: alpha(opacity=100);
opacity:1;
}
Si no fuera por la diversidad de navegadores el código se quedaría en cerca de la mitad, pero lo fundamental de esto es hacer que la caja interior (.links), la de los enlaces, tenga un posicionamiento absoluto (position: absolute;) con respecto a su contenedora (position: relative;) para que la podamos situar solapada y justo abajo del todo (bottom: 0;).
La segunda cuestión importante es que los enlaces se muestran inicialmente semitransparentes (opacity: .5;) y que es al hacer hover cuando los hacemos totalmente opacos. El resto sólo sirve para hacer el diseño adaptable y configurar padding, colores y fuentes. ¡Ah,sí! ..y el transition para que salga con el efecto fade que anunciamos en el título.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Olo antes de nada pedirte perdón por est cuestión que no tiene que ver con el post.
ResponderEliminarNecesito una plantilla, o la forma de hacerlo en cualquiera de blogger, que tenga solo 3 columnas, pero no para gadget sino 3 columnas principales, donde poner entradas, la idea es en una poner un campeonato deportivo de veteranos, en la otra el de niños y en la otra el absoluto, que se juegan simultaneamnete, por ello necesito poder disponer de tres columnas de entradas independientes para poder actualizar en la columna que quiera con una nueva entrada ¿Eso se puede hacer? ¿Pido un imposible? MUCHAS GRACIAS por tu respusta
Hola, no sé si eres el mismo que ha preguntado hoy también esto por Twitter, pero te voy a contestar lo mismo, aunque un poco más largo ya que el medio lo permite.
EliminarNo he visto nunca como va lo de hacer columnas por categoría, pues esa es la única forma que se me ocurre, pero puedes descargar esta plantilla http://goo.gl/9LU9L y luego ya modificarla al gusto.
La clave está en las etiquetas. Los posts de cada columna (mismo tema) deben tener la misma etiqueta y si no me he equivocado, luego esa plantilla te permite poner un feed para cada columna que accede sólo a una etiqueta por vez. Ese sería el sistema para hacer algo como lo que quieres.
Saludos Miguel, como dice Oloman la clave esta en las etiquetas así que seria así.
Eliminar- etiquetas las entradas con su etiqueta correspondiente.
- Luego tendrás a la mano la direcciones de los Feed de las etiquetas, que tu escojas, te sugiero que sea así: Niños 2013, Veteranos 2013, Algo Así... para que controles mejor la lista en el futuro.
· http://NombreDeTUBLOG.com/feeds/posts/default/-/NIÑOS2013
y luego para hacer las columnas puedes usar una de estas:
· http://vagabundia.blogspot.com/2011/04/navegando-entradas-de-una-etiqueta.html
·http://ciudadblogger.com/2011/05/ultimas-entradas-por-categorias-con.html
y una mas sencilla: · http://www.oloblogger.com/2009/09/splush-gadget-para-entradas-recientes.html
Para que lo puedas implementar en cualquier plantilla, incluyéndolo en un gadget html sin preocuparte por las columnas de la plantilla, ojala te sirva.
Y Oloman, que buen post!
Bien sencillo y elegante chevere....
L, muchas gracias por añadir detalles a mi breve explicación :)
EliminarHola! Lo he incorporado a mi blog, exactamente a una página estática. La idea es poner varias imágenes, pero al duplicar el código y hacer los cambios pertinentes en las url....me salen las imágenes en columna, una debajo de otra. Mi intención sería que apareciesen una al lado de otra, hasta que el ancho de la página lo permitiese, pero no se de que manera puedo conseguirlo. Gracias de antemano.
ResponderEliminarNo he encontrado esa página que dices para comprobarlo, pero pienso que con que cambies este "block" por un "inline-block", probablemente te funcionará cómo quieres:
Eliminar.imagelinks {
display: block;
...
Muchas gracias, lo he conseguido. Olvidé mencionar que la página no la tenía publicada todavía, precisamente porque no aparecía como deseaba. Pero gracias a tus indicaciones ahora sale perfecta. En unos días lo actualizaré. Gracias de nuevo.
Eliminarhola Oloman. Tengo dos preguntas, una, es que pasando por encima de los links de este post... no pasa nada, no voy a ningún lado, no logro descifrar la magia, digamos. Mi siguiente consulta no tiene nada que ver con esto: tengo mi blog un poco abandonado, pero de pronto me encuentro que así como el Féizbuk, los blogs, mi blog, se ha llenado de publicidad! y según lo veo, sin mi permiso!!! Hubo algún anuncio de que esto pasaría? hay alguna manera de revertirlo? no quiero ese espantoso anuncio en mi cabezal!! Gracias desde ya.
ResponderEliminarHola. No es magia, sino una idea de diseño y como se trata de una demo, los enlaces están vacíos y no llevan a ningún sitio.
EliminarSobre la publi, a mí no me salta nada al entrar a la página, pero lo que es seguro es que no es ninguna novedad de Blogger. Si te sigue ocurriendo es más achacable a algún gadget externo en tu plantilla, aunque no veo ninguno "sospechoso". A veces he visto que esto se debía a contadores de visitas de los invisibles, es decir de los que los lectores no ven...
jajaja gracias por contestar Oloman, pero claro, me refería a la magia como vos lo mencionabas, pensé que al pasar el mouse pasaba algo más, es el cambio de color el efecto entonces. Ahora que me decís que no ves la publicidad fui a ver ni blog y otros en los que había visto la misma publicidad... y ya no está. Esto me deja pasmada. Pero bueno, el único contador que tengo es el propio de Blogger. en fin, gracias Oloman por tomarte el tiempo para investigar. saludos
ResponderEliminar"Magia" estaba en cursiva. Era una licencia poética :)
EliminarSobre la publicidad en los blogs: me sucedía eso cuando un virus ingresó en mi computador. No aparecía la publicidad cuando ingresaba desde otro ordenador. Limpieza general, fue la solución.
EliminarA veces no es un virus, sino algo que acompaña a algún gadget que tomes de terceros. Y lo cachondo es que la publicidad que genera la ve todo el mundo menos tú, porque así es como lo tienen programado. De esta manera eres el último que te enteras.
EliminarBueno, el misterio sigue, la publicidad también. Hice unas capturas de pantalla para mostrarte esto que me tiene mal y las subí a un blog de pruebas. prueba
ResponderEliminarGracias mil Oloman. Saludos
y había entendido lo de la magia sí
No te queda más remedio que ir quitando todos los gadgets de la barra lateral, cabecera, pie, etc. uno por uno hasta descubrir con cuál deja de pasar eso. Ve guardando los códigos correspondientes en un bloc de notas para poder restituirlos cuando lo descubras.
EliminarSi no es ninguno de esos entonces tendrás que buscar "código extraño" en la plantilla, sobre todo JavaScript.
Bueno, qué remedio, voy a intentarlo. Gracias Oloman. Me temo que ya volveré a preguntarte por el "código extraño", pero ahora empiezo con los gadget. Saludos
ResponderEliminarpregunta: y si quiero hacer esto... en una nueva pagina del blog? en la interfaz nueva de blogger sale que se pueden hacer "paginas" yo tengo esas "paginas" como pestañas debajo del titulo del blog. y me gustaria poner esto solo ahi. como lo podria hacer?
ResponderEliminarHola AmarithiaLeCroix. Se haría exactamente igual, poniendo la primera parte de código directamente en una página. Sólo tienes que tener cuidado con no dejar saltos de línea.
EliminarHola, he cogido algunos trucos de tu pagina, pero no he encontrado por ningún sitio lo que busco. En mi plantilla hay zonas donde la imagen se agranda al pasar el ratón, pero sin salirse del tamaño que tiene, si es de 100x100, se agranda pero sigue midiendo 100x100. He encontrado como hacerlo para una foto, pero yo lo quería poner en un slider de etiquetas que he puesto y en entradas al azar que también es externo. Creo que hay que hacer un contenedor pero no se si funcionaria o hay que hacer otra cosa. Por si quieres verlo mas claro te dejo la dirección de mi blog de pruebas, que es igual que el bueno. Gracias y feliz año.
ResponderEliminarSe me olvido el enlace.
ResponderEliminarhttps://www.oloblogger.com/2013/04/imagenes-sobre-enlaces-fade.html?showComment=1515328021807#c8350100515949583728
Pues nada, que no acierto, es este.
ResponderEliminarhttps://alcoleamalon.blogspot.com.es/