Como adicionar links a imagens usando CSS no Wordpress

st0le · 23/08/2014

Hola betas,

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:

Inserir CODE, HTML ou PHP:

.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

Inserir CODE, HTML ou PHP:

<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 XD

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

Muchas gracias!

kanikase · 23/08/2014

En vez de en el a tener la calse, encierra con el a un div

st0le · 23/08/2014

kanikase disse:
En vez de en el a tener la calse, encierra con el a un div

No lo entiendo, puedes explicarlo detalladamente por favor? Soy bastante noob con programación.

saludos y gracias 🙂

kanikase · 23/08/2014

st0le disse:
No lo entiendo, puedes explicarlo detalladamente por favor? Soy bastante noob con programación.

saludos y gracias 🙂

Inserir CODE, HTML ou PHP:

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

Es lo que entendí que quieres hacer.

st0le · 23/08/2014

kanikase disse:
Inserir CODE, HTML ou PHP:

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

Es lo que entendí que quieres hacer.

Debería de ser lo mismo, no? meter una clase en el div, que en una linea (solo tengo esa línea).

Tengo 2 imágenes y quiero hacer 1 "boton" con ellas, cuando pase el cursor por encima, que cambie la imagen.

CSS hover image swap

CSS hover effects , Image hover effects , hover Opacity , hover Overlay and Hover change picture aqui lo explican con ejemplos y eso pero he hecho lo mismo y no funciona.

Alucino...

kanikase · 24/08/2014

st0le disse:
Debería de ser lo mismo, no? meter una clase en el div, que en una linea (solo tengo esa línea).

Tengo 2 imágenes y quiero hacer 1 "boton" con ellas, cuando pase el cursor por encima, que cambie la imagen.

CSS hover image swap

CSS hover effects , Image hover effects , hover Opacity , hover Overlay and Hover change picture aqui lo explican con ejemplos y eso pero he hecho lo mismo y no funciona.

Alucino...

Pasa el link de donde lo tienes para ver.

vellenger · 24/08/2014

Proba usando este code

HTML:

<!DOCTYPE html> 
<html> 
	<head> 
		<style type="text/css"> 
		.urlImg { width: 185px; height:185px; display:block; background-image: url('http://i.imgur.com/4H1gpW7.png'); }
		 .urlImg:hover { background-image: url('http://i.imgur.com/5lyvPkj.png'); } 
		 </style> 
	</head> 
	 <body> 
	 <a href="http://forobeta.com" class="urlImg" title="Corelangs link"></a> 
	 </body> 
</html>

Como adicionar links a imagens usando CSS no Wordpress

st0le

kanikase

st0le

kanikase

st0le

kanikase

vellenger

Tópicos similares