Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Стили (CSS) » подскажите что переделать в коде

подскажите что переделать в коде

     css    Все вопросы » Стили (CSS)    2432

вопрос
подскажите что переделать в коде чтобы нижнее затемнение появлялось только при наведении курсора на фотку

.example3 {
    display:inline-block;   
    position:relative;
}
.example3 .example_text{
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    height:25px;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    color:#fff;
    padding:5px;    
    background-color:rgba(0,0,0,.3);
}          


<div class="example3">
    <a href="ссылка" ><img src="ссылка"></a>
    <div class="example_text">
        <a href="ссылка">текст</a>
</div>
</div>


подскажите что переделать в коде

Ответил: pznt

.example3 {
    display:inline-block;   
    position:relative;
}
.example3 .example_text{
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    height:25px;
    width:100%;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    color:#fff;
    padding:5px;    
}    
.example3 .example_text:hover {
    background-color:rgba(0,0,0,.3);
}

2 комментария

casper_gt
Юзер

casper_gt - -

текст не пропадает, и появляется темный фон только при наведении на то место где он должен быть
Gopr
Юзер

Gopr - -

Сделано, пример реализации. Плюс небольшие плюшки с изображением;)
<div class='example'>
<a href="#"><img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-frc3/1463107_537352389691420_1817325263_n.jpg"/></a>
<div><a href="#">Ссылка</a> и текст...</div>
</div>

.example {display:inline-block;position:relative}
.example img {max-width:450px;height:auto}
.example div {position:absolute;display:none;padding:0 7px;color:#fff;background:rgba(0,0,0,0.5);left:0;width:100%;line-height:25px;bottom: 5px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
.example div a {color:#fff;text-decoration:none}
.example div a:hover {text-decoration:underline}
.example:hover div {display:block}

Похожие вопросы

 01.10.2011 compis  Стили (CSS)
 21.10.2012 wcw2007  Стили (CSS), jQuery
 01.04.2013 Heon  Шаблоны (TPL), Стили (CSS)
 10.08.2013 G-Force  Стили (CSS), jQuery
 26.06.2014 Ilya78rus  Общие вопросы, Шаблоны (TPL), Стили (CSS)
 12.09.2014 rambess1984  Общие вопросы по вёрстке, Стили (CSS)
 29.10.2014 G-3p  Общие вопросы по вёрстке, Стили (CSS)
 10.11.2014 jekonya  Стили (CSS)
 14.05.2015 evenegrad  Стили (CSS)
 11.07.2015 1707  Общие вопросы по вёрстке, Стили (CSS)
  • Puxlik | Telegram Sender 13
    Фото Puxlik
    Puxlik
    Telegram Sender
    Версию 17.1 поддерживает ?
  • TeraMoune | Не загружается изображение [Ошибка HTTP] ... 2
    Фото TeraMoune
    TeraMoune
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    В этой версии есть фрагментация загрузки файла когда загружаемый файл разделяется на фрагменты, по умолчанию 1 фрагмент 1.5мб. (И у вас написано лимиты на файл 4мб и картинки 5.86мб, этого достаточно чтобы принимать 1.5мб фрагменты) И если бы была проблема с весом или чем-то подобным то об этом бы сервер сообщил. Сервер отдал 500 ошибку это значит что угодно, нужно смотреть ответ от сервера в консоли разработчика или логах.
  • RedFox | Не загружается изображение [Ошибка HTTP] ... 2
    Фото RedFox
    RedFox
    Не загружается изображение [Ошибка HTTP]. Как исправить?
    "Некоторые картинки загружаются, но большинство нет."

    Сначала не обратил внимания, но видимо проблема в этом. Все, что больше 100Кб, не загружается. Что странно, поскольку в php у меня следующие значения:
    post_max_size = 100M
    upload_max_filesize = 100M
    max_file_uploads = 20

    Полагаю, где-то еще надо увеличить размер загружаемой картинки, но где?
  • LMakc | Модуль читалка pdf 1
    Фото LMakc
    LMakc
    Модуль читалка pdf
    Не начинай, я заплатил сегодня штраф за підручники. Сейчас очень сложно с этим.
  • ssssss | Сделать подсчет количества символов в ко ... 5
    Фото ssssss
    ssssss
    Сделать подсчет количества символов в комментариях
    Есть актуальный плагин под 17 версию? (только количество символов! без наворотов... записей куда-либо и т.п.) *ББ-редактор
  • alex.sg.spb | Как вывести информацию о обновлении ново ... 8
    Фото alex.sg.spb
    alex.sg.spb
    Как вывести информацию о обновлении новости, но на время?
    вопрос, в продолжение поста. Помогите с кодом вывода инфо UPDATE на краткой новости, так чтобы не нужно было нажимать внутри новости при редактировании галочку?
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Спасибо огромное. Этот вариант самый простой и рабочий!
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    К черту htaccess давайте проще

    к href добавьте id="xfield_value"
    <a href="/company/[xfvalue_company]/" id="xfield_value">[xfvalue_company]</a>

    И добавьте скрипт обработчик 
    <script>
document.addEventListener('DOMContentLoaded', function() {
    const links = document.querySelectorAll('a#xfield_value');

    links.forEach(link => {
      let href = link.getAttribute('href');

      if (href) {
        href = href.replace(/ /g, '+');
        link.setAttribute('href', href);
      }
    });
  });
</script>
  • Kentavr | Как вместо %20 в адресной строке подстав ... 9
    Фото Kentavr
    Kentavr
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Так сайт не работает вообще. Браузер выдает такое

    Страница недоступна Сайт ... выполнил переадресацию слишком много раз.
    Попробуйте удалить файлы cookie.

    ERR_TOO_MANY_REDIRECTS

    Куки чистил не помогает
  • derebas | Как вместо %20 в адресной строке подстав ... 9
    Фото derebas
    derebas
    Как вместо %20 в адресной строке подставлять символ + между словами ???
    Попробуйте так
    RewriteEngine On
    RewriteCond %{REQUEST_URI} %20
    RewriteRule (.*)%20(.*) $1+$2 [N]
    RewriteRule (.*) $1 [R=301,L]
наверх