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

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


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

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

.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 - 5 ноября 2013 11:40 -

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

Gopr
Юзер

Gopr - 5 ноября 2013 19:45 -

Сделано, пример реализации. Плюс небольшие плюшки с изображением;)
<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}

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх