Hola buenas tardes, tengo el siguiente problema, de la siguiente pagina
http://geekgirllife.com/place-text-o...ut-javascript/, la utilice para para que cuando paso el mouse por encima de la imagen aparezca un texto, y me redireccione a un link, el tema es que esta corrido jaja, me aparece tengo 9 imagenes dividas en 3 colunas y 3 filas y la primera imagen no aparece el link, pero en la 2da imagen me aparece el link de la primera imagen, les dejare el codigo html ( php ) y el codigo css ( utilice masonry para ordenar las imagenes)
Código:
<div class="item">
<ul class="img-list">
<li>
<table width="100" border="0" align="" style="border:hidden;">
<tr>
<p width="15%" rowspan="5"><img class="img" img src="<?php echo $post['imagen'] ; ?>" width="150" height="150" /></p>
</a>
<span class="text-content"><span><?php echo $post['nombre'] ; ?>
<?php echo '<a href="'.$post['direccion'].'">';?>
</span></span>
</tr>
<tr>
<td></td>
</tr>
</table><div style="clear:both"></div>
</div>
<?php } ?>
<style type="text/css">
$(document).ready(function(){
$('#contenedor').masonry();
});
</style>
Código:
/* Masonry*/
.item {
width: 200px;
margin: 5px;
float: left;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 200px;
margin: 0 1em 1em 0;
position: relative;
width: 200px;
}
span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 200px;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
opacity: 0;
}
ul.img-list li:hover span.text-content {
opacity: 1;
}span.text-content {
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 15px;
width: 200px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
}
li {
margin:0 auto;
float: left;
padding: 0 4px;
}