2014-10-15 3 views
0

Привет У меня есть страница, которая извлекает изображения из базы данных.Как разместить ID каждого изображения над ним

Мне нужно разместить Идентификатор изображения над изображениями в его передних средствах над изображением.

Я пробовал, но я не думаю, что это сработает.

Как это сделать?

Вот мой код изображения:

<a href="property.php?ImageID=<?php echo $row['ImageID'] ?>" > 
      <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" alt="<?php echo $row['ImageName'] ?>" class="imagedropshadow" ></a> 
+0

Вы можете использовать альт и название атрибутов –

+0

Я думаю, что вы ищете водяной знак на изображение. – Fluffeh

+0

@Fluffeh: Ya 100% – Rokhsar

ответ

1

CSS

.property { 
    width: 380px; 
    height: 270px; 
    box-shadow: inset 1px 1px 40px 0 rgba(0,0,0,.45); 
    border-bottom: 2px solid #fff; 
    border-right: 2px solid #fff; 
    margin: 5% auto 0 auto; 
    background-size: cover; 
    border-radius: 5px; 
    overflow: hidden; 
} 

.property-id { 
    background: rgba(0,0,0,.75); 
    text-align: center; 
    padding: 70px 0 70px 0; 
    opacity: 0; 
    -webkit-transition: opacity .25s ease; 
     -moz-transition: opacity .25s ease; 
} 

.property:hover .property-id { 
    opacity: 1; 
} 

.property-id-text { 
    font-family:Helvetica; 
    font-weight:900; 
    color:rgba(255,255,255,.85); 
    font-size:96px; 
} 

HTML

<div class="property" style="background-image: url(../../.../<?php echo $row['ImagePath'] ?>)"> 
    <div class="property-id"> 
     <span class="property-id-text"><?php echo $row['ImageID'] ?></span> 
    </div> 
</div> 

Демонстрация: http://jsfiddle.net/asvuge2k

+0

Я работаю. благодаря – Rokhsar

0
<a href="property.php?ImageID=<?php echo $row['ImageID'] ?>" > 
     <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" title="<?php echo $row['ImageName'] ?>" class="imagedropshadow" ></a> 
+0

, когда вы наведите указатель мыши, чтобы заголовок появился. Я хочу, чтобы Идентификатор изображения был помещен поверх изображения. – Rokhsar

+0

. должен исчезнуть при наведении ... ??? – Dinesh

-1
<a href="property.php?ImageID=<?=$row['ImageID'] ?>"> 
     <span style="position: absolute; background-color: #ffffff"><?=$row['ImageID'] ?></span> 
     <img src="../../.../<?php echo $row['ImagePath'] ?>" width="380" height="270" alt="<?=$row['ImageID'] ?>" class="imagedropshadow"> 
</a> 
Смежные вопросы