¿Cómo consigo hacer esto?

RedBull! · 3 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?

Muchas gracias.

ezkielnet · 3 Dic 2012

Buenas RedBull!

Eso se consigue con la propiedad hover de CSS o vía HTML con Javascript. En CSS se haría así:

Código:

#img {blackground: url (images/foto.jpg};
#img.hover {blackground: url (images/foto1.jpg};

Al pasar el ratón por la foto se mostrará encima la foto1. Obviamente para conseguir el mismo efecto que la web que has mostrado la segunda foto debería estar en .PNG para permitir la transparencia.

Saludos!

RedBull! · 3 Dic 2012

Pero ezkielnet, como hago para que sea algo automático en cada foto que publique?

De la forma que tú lo has puesto es solo para la URL de la foto que ponga, a ver si me explico, mi objetivo es incluirlo para que cuando yo postee una portada sea algo automático que al pasar el mouse por la foto salga la segunda foto en formato PNG y con fondo transparente. Espero haberme explicado.

Gracias crack!

ezkielnet · 3 Dic 2012

Suprimes una linea y lo dejas así:

Código:

#img.hover {blackground: url (images/foto1.jpg};

Pero esto hará que todas las imágenes del blog sean afectadas, incluso a las de la plantilla. No tengo un buen uso de Javascript y no sé automatizarlo para que no afecte a todo el blog. Espera a que algún programador se pase.

RedBull! · 3 Dic 2012

ezkielnet dijo:
Suprimes una linea y lo dejas así:

Código:

#img.hover {blackground: url (images/foto1.jpg};

Pero esto hará que todas las imágenes del blog sean afectadas, incluso a las de la plantilla. No tengo un buen uso de Javascript y no sé automatizarlo para que no afecte a todo el blog. Espera a que algún programador se pase.

Muchas gracias de todas formas. Esperemos que un programador se pase por aquí.

JozeNetz · 3 Dic 2012

Esto debería funcionar:

HTML:

<div class="wrapper">
<div class="demo">
		   <a href="http://portadastw.com/paisaje-con-montanas-aridas-portadas-para-twitter/"><img src="http://portadastw.com/wp-content/uploads/2012/11/banner-hover1.png" class="demo-hover"></a>
		</div>
<img title="Paisaje con montañas áridas" alt="portada para twitter 3065 1024x512 Paisaje con montañas áridas " src="http://portadastw.com/wp-content/uploads/2012/11/portada-para-twitter-3065-1024x512.jpg" class="portada">
</div>

Código:

.demo {
    position: absolute;
}
.demo-hover {
    opacity: 0;
    height: 20em;
    width: 40em;
}
.demo-hover:hover {
    opacity: 1;
}
.portada {
    height: 20em;
    width: 40em;
}
.wrapper {
    margin-left: 2em;
}

pd: La idea la saqué de la misma página.

salu2.

RedBull! · 4 Dic 2012

¿Qué código tendría que pegar exactamente de HTML?

<div class="wrapper">
<div class="demo">
</div>
</div>

ezkielnet · 4 Dic 2012

El problema es que si pone 2 imágenes en un post las 2 imágenes se cambiarán. No sé cuantas imágenes pones en un post y si solo quieres poner una...

RedBull! · 4 Dic 2012

En cada post solo va una imagen, y esa imagen al pasar el mouse debe mostrarse la previsualización.

ezkielnet · 4 Dic 2012

entonces te sirve ese código que te han puesto.

RedBull! · 4 Dic 2012

Lo que no me queda claro, que parte del código HTML debo incluir. La parte del CSS está claro que debe ir entera, pero la de HTML ahí partes de la web de donde la ha cogido. No sé si me he expresado bien...

Mi duda es si en el archivo PHP del theme que uso debo incluir únicamente

<div class="wrapper">
<div class="demo">
</div>
</div>

O debo meter algo más.

ezkielnet · 4 Dic 2012

Eso ya depende de tu theme, del CMS que uses etc. si no das más datos poco puedo ayudarte.

RedBull! · 4 Dic 2012

Uso este theme ezkielnet: Portfolio Press | WordPress Theming

Muchas gracias por la ayuda que me estás ofreciendo.

ezkielnet · 4 Dic 2012

Es mi función aquí

Necesito saber donde quieres que se haga el cambio. ¿En el index o una vez que entre en la entrada?

RedBull! · 4 Dic 2012

¿Se podría hacer en ambos sitios? Para que se viera la previsualización tanto en el index como cuando entres a la entrada, es decir, siempre que pongas el mouse encima de la foto.

ezkielnet · 4 Dic 2012

Claro, se puede hacer donde quieras por eso pregunto. Pero deberías hacer 2 versiones y habría que ampliar el CSS.

Para el index, debes abrir el style.css de tu theme y buscar #portfolio que se verá así:

Código:

#portfolio {
	padding:0 0 4%;
	float:left;
	width:70%;
}

Y justo abajo poner el siguiente código:

Código:

#portfolio img:hover {
	background: url (images/foto1.jpg);
	}

En la carpeta images, metes una foto llamada "foto1.jpg" si quieres usar trasparencia debería ser en .png y cambiar también el formato en el trozo del CSS.

Para el single,debes abrir el style.css de tu theme y buscar .entry-content que se verá así:

Código:

.entry-content img,
.comment-content img,
.widget img {
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	background:#fff;
}

Y justo abajo poner el siguiente código:

Código:

.entry-content img:hover {
	background: url (images/foto2.jpg);
	}

En la carpeta images, metes una foto llamada "foto2.jpg" si quieres usar transparencia debería ser en .png y cambiar también el formato en el trozo del CSS. Las imágenes foto1 y foto2 deben tener el mismo tamaño para que no pase nada raro.

He hecho el CSS así a ojo (mirando el código del theme) así que posiblemente no funcione a la primera. Si funciona a la primera me retiro :very_drunk:

RedBull! · 4 Dic 2012

Acabo de probar eso y no hace ningún cambio, tanto en el index como en el single, la foto la he subido en .PNG y el formato lo he puesto bien también en el .css :S

ezkielnet · 4 Dic 2012

Pues entonces debes esperarte a que entienda el código del theme, ya que es complicado al ser diferente a los demás...

Eso sí, no sé cuando lo podré mirar.

RedBull! · 4 Dic 2012

Vale, si te sirve de ayuda, a la hora de postear me aparecen cuatro opciones para escoger el tipo de entrada que quiero "Galería, Normal, Imagen, etc". Escogo Imagen.

Gracias nuevamente!

¿Cómo consigo hacer esto?

Comparte esta página