[SOLUCIONADO] Imagen over sobre otra imagen

[fidelio]

Buenas,
A ver si me podéis echar un cable.
Tengo una imagen en un div, con un css concreto.
Quiero que cuando se pase el ratón encima se cargue otra a modo de transparencia.
El ejemplo, más fácil es aquel en el que al pasar el ratón sobre una imagen aparece una lupa para advertir que si pulsas, se amplía.
¿Alguien sabe cómo se hace?
He probado a añadirle al css ":hover" la propiedad de background-image y el nombre del archivo que quiero que aparezca cuando pasa el cursor, pero no hace nada.

Muchas gracias.

[DragonX]

https://mark-rolich.github.io/Magnifier.js/

Slds.-

[ArturoGallegos]

Creo que mas bien lo que busca es esto

https://jsfiddle.net/arturogallegos/02cah7tx/

Solo aplicale la imagen de background al elemento before de este ejemplo

[fidelio]

Muchas gracias a ambos.

Pero creo que lo que más se acerca es lo que postea el compañero ArturoGallegos, aunque no logro muy bien cómo aplicarlo.
Es decir, el estilo que tengo ahora mismo para la imagen fija es:

.cartel_c {
position: absolute;
margin-left: 0px;
margin-top: -585px;
z-index: 2;
height: 445px;
width: auto;
display: block;
border-bottom: 7px #ffbf00 solid;
}

El estilo del hover, sería este

.cartel_c:hover {
display: block;
content: '';
width: 0;
height: 100%;
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
left: 0;
transition:all 0.5s ease;
}

¿Sutituyendo el "background" por un "background-image"?
Pero con eso no me sale nada.

Un saludo.

[ArturoGallegos]

Revisa el código de mi ejemplo, para que te des una idea y reestructura tu codigo.

recalquese que aplicar una imagen de background a una imagen no tiene sentido puesto que queda debajo de la imagen y jamas se mostrara.

También puedes servirte colocar tu código en jsfiddle para que puedas mostrarnos lo que tienes y como funciona, o ya de menos deja posteado tu codigo html + css suficiente para reproducir el problema

[fidelio]

Buenas tardes,

El código es:

Código HTML:

<a href="http://www.primeratoma.com.es/wp-content/uploads/cartel_el_rey_leon.jpg"><img class="cartel_c" title="El rey león." src="http://www.primeratoma.com.es/wp-content/uploads/cartel_el_rey_leon.jpg" alt="" width="512" height="741" /></a> 

Y el CSS para esa imagen es:

Código:

.cartel_c {
position: absolute;
margin-left: 0px;
margin-top: -585px;
z-index: 2;
height: 445px;
width: auto;
display: block;
border-bottom: 7px #ffbf00 solid;
}

No se si esto sirve.
Disculpa pero es que no tengo demasiada idea del tema.

Un saludo.

[ArturoGallegos]

El código publicado no es suficiente para emular el problema, es mas ni siquiera se aproxima a hacer lo que pides, carece de elementos necesarios.

Tomate todo el tiempo del mundo que necesites en examinar el ejemplo que te he dejado, aunque es muy viejo aun es funcional y deberías tener todo lo necesario para completar tu código.

Una cosa es ayudarte/orientarte y otra es pretender hacer el trabajo por ti.
Recuerda que todos tuvimos que aprender en algún momento fuimos como tu sin idea de que hacer, pero dedica tiempo a estudiar y lograras avanzar.

[fidelio]

Gracias, pero, para empezar no es un trabajo, sino un hobby (es un blog de cine en donde escribo mis impresiones sobre películas que veo, sin obtener absolutamente nada a cambio).
Si posteo aquí es porque siempre me ha servido para resolver los problemas (que dicho sea de paso tampoco es que hayan sido mucho, no soy un experto y mis dudas siempre son bastante simples).
Si posteo aquí es porque he agotado mis conocimientos y, evidentemente, tengo que recurrir a gente que sabe.
Igualmente, gracias por el tiempo.
Si no se me quiere ayudar, no pasa nada, no obligo a nadie, pero evidentemente si posteo aquí es porque es la forma más rápida/efectiva de resolver un problema.

Un saludo y muchas gracias igualmente.

[ArturoGallegos]

No te ofendas a pesar de que sea un hobby no te exime de estudiar.

yo también empece como hobby hoy día es mi trabajo y fuente de alimento.

Y no, la forma mas rápida no es preguntar aquí, es pagar a alguien que sepa del tema.

Aquí es ayuda y orientación, solo eso, si no entiendes el código de ejemplo que se te da entonces no podemos hacer nada por ti.

[fidelio]

No, no me ofende, pero tampoco es la respuesta que uno espera cuando pide ayuda, si te soy sincero. Es como si un niño me pide que le ayude a abrocharse los zapatos y le digo que ahí tiene los zapatos y que aprenda a abrochárselos, pero no le digo cómo. Pero bueno, si ésta es tu forma de ayudar, lo mismo yo no la entiendo.

Ignoro se si será la nueva política del foro (hacía mucho que no entraba) o es algo en concreto que he puesto que no ha sentado bien o no lo he preguntado de una forma concreta.

Pero entonces ¿cual es la utilidad de este foro sino es ayudar a la gente a resolver sus dudas? No le veo mucho sentido.

Quizá haya algún otro usuario con una predisposición diferente a solucionarme el problema.

Muchas gracias de todos modos, y un saludo.

[prueba230683]

@fidelio, igual te refieres a algo como esto:

https://www.w3schools.com/code/tryit...e=G9ZGEFFNNOOI

Edit. Si quieres poner texto que quede centrado:

https://www.w3schools.com/code/tryit...e=G9ZGT1YQX5JJ

Es una simple transición de opacidad 0 (invisible) a opacidad la que quieras (en el ejemplo he puesto 0.8 para que se note la transparencia).

Es importante añadir background-size: cover; para que la imagen que se superpone se adapte al tamaño de la que queda por debajo.

Un saludo.

[fidelio]

prueba230683.

Pues muchas gracias, porque he avanzado con ello bastante.
El problema es que la imagen tiene un enlace, que es la misma pero más grande, y claro en cuanto le pongo la que aparece encima, no me deja pulsarla (evidentemente por el z-index).
¿Habría alguna manera de que siguiera siendo "linkable"?
Es decir, que se superpusiera la imagen, pero a la vez que no se perdiera el enlace.

Si no es posible, que me da que no, porque claro es una capa nueva, no pasa nada, simplemente dejo que la imagen sea sólo la lupa (que también me valdría) y la coloco en una de las esquina, y listo, no se pierde el enlace porque la lupa ocupa muy poco.

Mil gracias!

[prueba230683]

Como bien dices, no es posible que un enlace pueda ser clicado si se encuentra debajo de otra capa.

Si el enlace está en la capa inferior, la única posibilidad de que sea "clicable" es que la capa superior no tape el enlace.

Otra cosa que puedes hacer es ponerle el link a la capa superior (en tu caso la lupa), pero no sé si quieres eso.

Saludos.

[fidelio]

Me parece bien como está ahora.
Muchísimas gracias por tu ayuda. Da gusto cuando la gente se presta a echarte un cable.

Un saludo.