Черное наложение на изображение при наведении и должно оставаться активным, когда мы заходим на страницу

Question

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

У меня есть четыре изображения на первой странице и такие же изображения на внутренних страницах.

Вот HTML-код:

<ul class="thumbnails">
    <li class="span3">
        <a href="#">
            <div id="ImageHover">
                <img src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png" alt="" />
            </div>
        </a>
    </li>
</ul>

Здесь CSS:

<style>
#ImageHover img:hover
{
     background-color:rgba(0,0,0,0.6);
}
</style>

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

Первая проблема решена, и когда внутри страницы, чтобы сделать изображение активным с наложением, я сделал это -> Вот HTML:

<div id="ImageHover" class="active">
<img alt="" src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png">
</div>

Вот CSS:

#ImageHover.active {
    background : rgba( 0, 0, 0, 0.5 );
    bottom : 0;
    content : ' ';
    left : 0;
    position : absolute;
    right : 0;
    top : 0;
}

но это заставляет изображение исчезнуть. и когда я блокирую положение, оно возвращается, но оборотная сторона изображения. Что мне теперь делать.

Answer 1

Замените свой текущий CSS следующим и примените .active класс к твоей коробке.

#ImageHover {
    position: relative;
}

#ImageHover:hover:after,
#ImageHover.active:after {
    background : rgba( 0, 0, 0, 0.5 );
    position: absolute;
    top: 0;
    left: 28px;
    bottom: 15px;
    right: 28px;
    content: '';
}

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

Answer 2

Это (или что-то подобное) должно дать вам эффект, по крайней мере, в современных браузерах:

#imageHover {
    position : relative;
}
#imageHover:hover:after {
    background : rgba( 0, 0, 0, 0.6 );
    bottom : 0;
    content : ' ';
    left : 0;
    position : absolute;
    right : 0;
    top : 0;
}

Чтобы перенести эффект, чтобы указать, что пользователь находится на данной странице, вам понадобится класс на соответствующей #imageHover на странице. Вы можете добавить #imageHover.active как дополнительное правило после стиля наведения.

В качестве примечания вы, вероятно, захотите использовать класс вместо идентификатора, или вам нужно будет добавить правило CSS для каждого элемента imageHover.

РЕДАКТИРОВАТЬ: селектор для .active класс также понадобится :after Псевдо-элемент. Правило CSS будет примерно таким:

#imageHover:hover:after,
#imageHover.active:after {
    /* ...css... */
}

Извиняюсь за то, что не разъяснил это.

Дальнейшее чтение о псевдоэлементах (эти вещи потрясающие!)

Answer 3

Чтобы изображение было уже активным при загрузке следующей страницы, вам следует загрузить страницу с атрибутом hash.

Допустим, у вас есть 4 изображения с разными идентификаторами на странице pictures.html:

<img id="image1" class="imageOverlay" src="" />
<img id="image2" class="imageOverlay" src="" />
<img id="image3" class="imageOverlay" src="" />
<img id="image4" class="imageOverlay" src="" />

Чтобы загрузить страницу с активным 3-м изображением, вы вызываете pictures.html#image3

Затем в вашем CSS:

.imageOverlay:active {
    /* CSS for image overlay */
}

Этот CSS будет применяться к изображению с идентификатором, соответствующим хешу в URL. Проблема, с которой вы можете столкнуться, заключается в том, что браузер будет прокручивать это изображение при загрузке страницы. Что то, что вы можете не хотеть.

Я не думаю, что в CSS есть способ избежать такого поведения.