Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Последние темы форума

Показать новые сообщения »

Почтовая рассылка

Подписчиков: 11653
Последний выпуск: 19.06.2015

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

84K
06 октября 2014 года
dimkachel
6 / / 29.09.2014
Весь интернет перерыл не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. и внутри блока-картинки появлялся текст. Прошу помочь.
8
07 октября 2014 года
mfender
3.5K / / 15.06.2005
В блок поместить блок, где картинка фоном, а над ним ещё блок с текстом и чёрным фоном прозрачный. При наведении на него opacity: 50%. Разумеется блок-контейнер должен быть position absolute или relative, внутренние блоки absolute.

UPD. Вот, набросал на скорую руку.


Код:
<!doctype html>
<html>
    <head>
        <style>
            .block-container {
                position: relative;
                float: left;
                margin: 2px;
            }
            .block-container, .block-container div, .block-container img { width: 150px; height: 150px; }
            .block-container div, .block-container img { position: absolute; }
            .block-container img {z-index: 1000;}
            .block-front {
                z-index: 1001;
                background-color: black;
                transition: all 0.4s ease-in-out 0s;
                opacity: 0;
                color: white;
                cursor: pointer;
            }
            .block-front:hover { opacity: .5; }
            .block-front span {
                display: block;
                font-weight: bold;
                padding: 60px 0;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="block-container">
            <img src="http://cs314219.vk.me/v314219634/79b3/ted_Uf1df_4.jpg" />
            <div class="block-front"><span>Any text</span></div>
        </div>
        <div class="block-container">
            <img src="http://cs409516.vk.me/v409516519/968c/akk26-QqOnE.jpg" />
            <div class="block-front"><span>Any text</span></div>
        </div>
        <div class="block-container">
            <img src="http://cs10830.vk.me/u263906/e_a0d4c74d.jpg" />
            <div class="block-front"><span>Any text</span></div>
        </div>
    </body>
</html>

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог