Помогите сделать такой же эффект

67

lordenas

7 декабря 2012, 20:26

764

Здравствуйте помогите пожалуйста сделать такой же эффект с картинкой.

Нужно вывести сверху картинки прозрачный блок а в нем текст.

C

291

Chukcha

7 декабря 2012, 20:41

#1

<img />

</div>

N

11

netmind

8 декабря 2012, 00:27

#2

Можно и без картинки-бэкграунда:

<img />

</div>

тыц (http://logo-site.ru)

67

lordenas

8 декабря 2012, 05:40

#3

netmind:
Можно и без картинки-бэкграунда:
<div position:relative>
<div class="video-news-content">

<img src="[xfvalue_image]" align="left" alt="{title}" title="{title}"></div>

<div position:absolute; bottom:0; height:xxx;background:#000;background: rgba(0,0,0,0.7);>ТЕКСТ</div>
</div>

не работает.

N

11

netmind

8 декабря 2012, 13:13

#4

lordenas:
не работает.

Возьмите отсюда: http://mediacom-group.ru/demo/portfolio/

[Удален]

8 декабря 2012, 13:21

#5

<style>

.image{position: relative; top: 0; width: 200px; height: 200px;}

.description{position: absolute; bottom: 0; left: 0; width: 200px; height: 15px; padding: 10px; background: url(image.png); color: #fff;}

</style>



<div class="image">

    <img src="image.jpg" style="width: 200px; height: 200px;" alt="">

    <div class="description">

         Описание для картинки

    </div>

</div>

C

291

Chukcha

8 декабря 2012, 13:30

#6

netmind, в ие не работает

Сашко, все верно

background: url(image.png);

Все верно - image.png должен быть полупрозрачным

67

lordenas

8 декабря 2012, 17:52

#7

Спасибо получилось

Дзен реализовал для авторов возможность вывода денег через СПБ

Что делать, если ваша email-рассылка попала в спам