автоматическое (не зависание) CSS-оверлей в зависимости от содержимого поля базы данных

Question

автоматическое (не зависание) CSS-оверлей в зависимости от содержимого поля базы данных

Я хочу, чтобы следующий загрузочный код автоматически отображал оверлей для двух из трех опций, содержащихся в поле базы данных. Они проданы, контракт и нет.

Я хочу разные оверлеи для SOLD и CONTRACT, и никаких оверлеев для NO

Я искал оверлейные программы, большинство учебных пособий по событиям при наведении, и я заблудился, как это сделать.

<div class="row">
<div class="col-md-6 col-md-offset-3">
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>">
<img src="https://web-answers.ru/wp-content/uploads/2019/02/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/>
</a>
</div><br><br>
</div>

0

css overlay php twitter-bootstrap-3

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я разобрался с ней через пару js fiddles по другим вопросам здесь, если это кому-нибудь поможет, вот код, который я добавил …

HTML
Под изображением я добавил эскиз div и заголовок div, оба зависят от содержимого поля базы данных.

<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?>
<div class="caption post-content-sold"></div>
<? } ?>
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?>
<div class="caption post-content-contract"></div>
<? } ?>

Затем в CSS я добавил код, чтобы сделать миниатюру относительным, а затем добавил два класса для стилизации изображения, относящегося к полю базы данных.

.thumbnail {
position: relative;
}

.post-content-sold {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
opacity: 0.8;
top:0;
left:0;
min-width: 100%;
max-height: 98%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/sold.png);

}
.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%;
position: absolute;
color: #ffffff;
content:url(http://www.mtnlakerealty.com/contract.png);

}

0