Cómo agregar enlaces a imágenes usando CSS en Wordpress

st0le · 2014-08-23T23:35:47-0500

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:

Insertar CODE, HTML o 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

Insertar CODE, HTML o 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 · 2014-08-23T23:46:52-0500

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

st0le · 2014-08-23T23:51:14-0500

kanikase dijo:
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 · 2014-08-23T23:54:18-0500

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

saludos y gracias 🙂

Insertar CODE, HTML o PHP:

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

Es lo que entendí que quieres hacer.

st0le · 2014-08-23T23:57:40-0500

kanikase dijo:
Insertar CODE, HTML o 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 · 2014-08-24T00:03:00-0500

st0le dijo:
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 · 2014-08-24T00:34:12-0500

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>

Cómo agregar enlaces a imágenes usando CSS en Wordpress

st0le

kanikase

st0le

kanikase

st0le

kanikase

vellenger

Temas similares