Problema con imagenes, links y over

st0le0ne1 #1 Ago '14

Hola,

Lo que quiero hacer es tan fácil como meter 2 imagenes y que cuando pase el cursor por encima, sea un link.

imposible, lo he probado de 3 maneras y no me funciona :s

esto es lo que tengo en CSS:

.urlImg { 
width: 185px;
 height:185px;
 display:block;
 background-image: url('images/button-wanna.png'); 
} 

.urlImg:hover { 
background-image: url('images/button-wanna-press.png'); 
}

Esto en HTML

<a href="http://www.themarketingkitchen.com.au" class="urlImg" title="Corelangs link"></a>

Que tengo mal? la imagen en url la he puesto de todas las maneras diferentes XDD

Lo estoy haciendo en un WP, no se si pasa algo..

Muchas gracias!

ESL_Kaiser #2 Ago '14

y por que no lo haces directamente en el html?

<a href="http://www.themarketingkitchen.com.au"><img src="images/button-wanna.png" width="185px"></a>

si no me equivoco, deberia funcionar xD

Tambien puede ser por la ruta donde tengas el css en la carpeta de la web, aunque siendo wp no se como va, pero yo siempre tengo una carpeta que se llama css y otra imagenes, con lo cual tengo que salir de una para entrar en otra en las rutas relativas ('../images/button.png') no se si será por eso

1 respuesta

st0le0ne1 #3 Ago '14

#2

Quiero que cuando pase el cursor por encima, salga otra imagen xd

con el over, no?

1 respuesta

ESL_Kaiser #4 Ago '14

#3 si con el hover, pero sería: " a:hover " para hacer referencia a los enlaces cuando pases por encima el ratón

por ejemplo

ul#nav li a {
    background: url("../images/label.png") no-repeat scroll 0 -149px transparent;
    color: #9C5959;
    display: block;
    font: bold 16px Helvetica,Arial,Sans-Serif;
    height: 77px;
    margin: 0 32px;
    padding: 72px 0 0;
    text-decoration: none;
    text-shadow: 0 1px 3px #C4BDA6;
    text-transform: uppercase;
    width: 97px;
}
ul#nav li a:hover {
    background: url("../images/label.png") no-repeat scroll 0 0 transparent;
    color: #EEE9D9;
    text-shadow: 0 2px 3px #4C2222;
}

a mi con eso en un menu, me aparece una imagen cuando paso el raton por encima, yo lo tengo con js, para que haga un efecto de transición, pero vaya, debería servirte , si no te sale si quieres te lo miro más profundmente, que las horas que son... xD

1 respuesta

st0le0ne1 #5 Ago '14

#4 y en el html como lo haces? xDDD

Pf, no me sale, volví a probar otra cosa... es horrible esto

1 respuesta

ESL_Kaiser #6 Ago '14

#5 ya lo tengo, te lo subo un segundo

https://www.dropbox.com/s/mhwryqanx41020w/test.rar?dl=0

espero que con eso te valga xD

1 respuesta

st0le0ne1 #7 Ago '14

#6 vale, muchísimas gracias, si no se hacerlo con esto, mejor no digo nada que ya es vergonzoso XD

por cierto, se puede cambiar el tamaño de la imagen desde el background-image?

Gracias de nuevo

1 respuesta

ESL_Kaiser #8 Ago '14

#7 claro hombre xD

background-size: 100% 100%;
    background-repeat: no-repeat;

El primero es para las dimensiones si la imagen es cuadrada o no quieres que se deforme yo siempre cambio el width, me resulta más sencillo y seria:

background-size: 25%; - por ejemplo o los pixeles que tu quieras

y el no repeat es para que no se cree mosaico, te lo pongo por si preguntas que al hacer más pequeño el background-image se duplica >.< espero que te ayude con eso

1 respuesta

st0le0ne1 #9 Ago '14

#8

Perfecto, muchas gracias.

Problema con imagenes, links y over

Usuarios habituales

Tags