¿Cómo crear una previsualización de la portada de Twitter en mi sitio?

PGWebs · 5 Dic 2012

Hola,

Ando buscando hacer una cosa en uno de mis sitios, una "previsualización" de como quedaría una portada de Twitter puesta en nuestro perfil. Para que me entendáis mejor, voy a dejar una web de ejemplo: Portadas para Twitter | Imagenes para twitter | Cabeceras twitter -

Al poner el mouse encima de una imágen aparece otra con fondo transparente, esto es lo que me gustaría conseguir hacer.

¿Alguien sabe como poder hacerlo?

El theme que uso es este, por si sirve de ayuda: Portfolio Press | WordPress Theming

Muchísimas gracias desde ya, para cualquier ayuda que podáis brindarme.

Dhampire · 5 Dic 2012

En realidad es un :hover por cada ves que pasas el mouse sobre la imagen aparece otra imagen por encima.

http://portadastw.com/wp-content/uploads/2012/11/banner-hover1.png

Ahora adaptarlo a la plantilla que quieres, seria colocar la imagen en reemplazo de la categoría que se muestra.

En todo caso tendrías que buscar algunos divs en el index (creo)

HTML:

<div class="portfolio-item item-1">
						<a class="thumb" title="Permanent Link toY" rel="bookmark" href="http://themes.wptheming.com/portfolio/portfolio/y/" style="opacity: 1;"><img width="215" height="175" title="IMG_3568-630x472" alt="IMG_3568-630x472" class="attachment-portfolio-thumbnail wp-post-image" src="http://themes.wptheming.com/portfolio/files/2011/11/IMG_3568-630x472-215x175.jpg"></a>
						

[COLOR="#FFFF00"]<a class="title-overlay"[/COLOR] title="Permanent Link to Y" rel="bookmark" href="http://themes.wptheming.com/portfolio/portfolio/y/" style="opacity: 0; display: inline;">[COLOR="#FFA500"]Imagen o texto[/COLOR]</a>
		</div>

Tendrias que modificar y hacer pruebas hasta que tengas el resultado que quieres.

PGWebs · 5 Dic 2012

¿Como logro incorporar entonces el hover en la plantilla que uso en mi web? Llevo varios días intentándolo y ya ando un poco perdido.

Dhampire dijo:
En realidad es un :hover por cada ves que pasas el mouse sobre la imagen aparece otra imagen por encima.

http://portadastw.com/wp-content/uploads/2012/11/banner-hover1.png

Ahora adaptarlo a la plantilla que quieres, seria colocar la imagen en reemplazo de la categoría que se muestra.

En todo caso tendrías que buscar algunos divs en el index (creo)

HTML:

<div class="portfolio-item item-1"> <a class="thumb" title="Permanent Link toY" rel="bookmark" href="http://themes.wptheming.com/portfolio/portfolio/y/" style="opacity: 1;"><img width="215" height="175" title="IMG_3568-630x472" alt="IMG_3568-630x472" class="attachment-portfolio-thumbnail wp-post-image" src="http://themes.wptheming.com/portfolio/files/2011/11/IMG_3568-630x472-215x175.jpg"></a> [COLOR="#FFFF00"]<a class="title-overlay"[/COLOR] title="Permanent Link to Y" rel="bookmark" href="http://themes.wptheming.com/portfolio/portfolio/y/" style="opacity: 0; display: inline;">[COLOR="#FFA500"]Imagen o texto[/COLOR]</a> </div>

Tendrias que modificar y hacer pruebas hasta que tengas el resultado que quieres.

Dhampire · 5 Dic 2012

En la carpeta de la plantilla busca el archivo "content-portfolio.php" busca - Linea 67

HTML:

			<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'portfoliopress' ); ?> <?php the_title_attribute(); ?>" class="title-overlay"><?php the_title() ?></a>

Reemplaza <?php the_title() ?> por lo que quieras colocar.

Saludos

PGWebs · 5 Dic 2012

PGWebs dijo:
¿Como logro incorporar entonces el hover en la plantilla que uso en mi web? Llevo varios días intentándolo y ya ando un poco perdido.

He reemplazado lo que me has dicho, quedando así y no ha funcionado.

HTML:

<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e( 'Permanent Link to', 'portfoliopress' ); ?> <?php the_title_attribute(); ?>" class="title-overlay"><img class="nobg" src="http://www.midominio.com/imagenes/demo.png"></a>

¿Cómo crear una previsualización de la portada de Twitter en mi sitio?

PGWebs

Dhampire

PGWebs

Dhampire

PGWebs

Temas similares

Privacidad y transparencia

Privacidad y transparencia