Помогите решить задачу

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

 

"Какой-нибудь логотип" должен появляться при нажатии на ссылку, или при входе на страницу, или это всё вообще статично?

 

это все только средствами html и css

 

Ребята, помогите пожалуйста... все перепробовала, не получается :-(

 

Ну если оч грубо говоря, то как-то так:

 

В чем сейчас проблема? Почему-то не показываются картинки и области-ссылки не работают, после добавления логотипа с названием...

HTML:

<div class="wrapper">
    <a href="#">
    <div class="left">
    Текст под тенью
    </div></a>
    <a href="#">
    <div class="right">
    Текст под тенью
    </div></a>
    <div class="logo_wrapper">
        <div class="logo">
            <img src="images/logo.png" alt="" />
            <h1>Название <br>компании</h1>
        </div>
    </div>
</div>

Код:

body {
    margin: 0 auto;
    width: 100%;
    height: 100%;

}

.wrapper {
    margin: 0px auto;
    z-index: 20;
    position: relative;
}

.left {
    float: left;
    width: 50%;
    height: 100%;
    background-image: url(/images/1.jpg);
}

.right {
    float: left;
    width: 50%;
    height: 100%;
    background-image: url(/images/2.jpg);
}

.logo_wrapper {
    position: absolute;
    width: 100%;
    height: 100px;
}

.logo {
    margin: 0 auto;
    margin-top: 100px;
    width: 300px;
    height: 300px;
    z-index: 19;
    position: relative;
    text-align: center;
}

 

Путь не правильный. Видимо css лежит не в корневой папе, попробуйте так:

HTML:

url(../image/1.jpg) или ./image/1.jpg)

logo_wrapper абсолютно позиционируется и получается над.

А как вы хотели? Чтобы под тенью и ещё все ссылки работали?

 

Видимо задача не верная.
Похоже, что должно быть при наведении тень пропадать, я правильно понимаю ?

Если классическим opacity делать, то это будет прозрачность. в этом случаи, можно попробовать сделать черный фон и наложить opacity на блок. Он станет почти эффекта тень, а при наведении будет ярким.

Во всех других случаях тут без js не обойтись.

 

Хотя, если сильно поизвращаться в css, то можно будет сделать. путем деления двух блоков. в одной области, например.

<div class="left">
<div class="noshadow">

</div>

<div class="shadow">

</div>
</div>

Вот есть 2 блока. По умолчанию shadow будет идти выше. Если ему дать прозрачность 0.5% и background:#000 то будет тень.

При наведении на .left мы делаем эффект замены z-index для noshadow, а для shadow можно красиво спрятать при помощь transition.

Главное условие - сохранить единую высоту для обоих блоков.

 

Есть несколько вариантов решения. Напишите что именно Вам требуется? логотип - название а потом 2 колонки?. Заскриньте и обведите нужные колонки в пейнте тогда сможем Вам помочь