1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Отображение картинок на странице

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем fack3637363s, 26 авг 2016.

  1. fack3637363s

    fack3637363s

    Регистрация:
    26 авг 2016
    Сообщения:
    8
    Симпатии:
    0
    Помогли мне в прошлой теме разместить картинку строго от краёв окна браузера, но есть другой вопрос

    Дело в том, что при наведении на картинку, должна появляться тень справа от неё (и слева от левой картинки)
    При наведении на черную картинку (2 скриншот), всё работает как надо, но при наведении на правую (3 скриншот), тень появляется так же от правой.
    Скорее всего это потому что применил стиль padding к правой картинке, и поэтому тень начинается от конца черной картинки (т.е где должна находиться изначально светлая, без стиля padding)

    Как мне сделать, чтобы всё было как задумано?

    Так же есть еще картинка стена, между ними, но когда её вставляешь, она ставится не вплотную к черной, а через промежуток примерно 5 пикселей, и из-за этого светлая картинка переносится вниз..


    HTML:

    <html>
    <head>
    <title>CSGOREBORN INTRO</title>
    <meta charset=UTF-8"/>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    </head>

    <body>
    <a href="/"><img class="shine" src="ct.jpg"></a>

    <a href="/"><img class="shine" style="padding: 0 0 0 57px" src="terr.jpg"></a>
    </body>
    </html>

    CSS:

    body {
    font-family: Arial, Sans-Serif; /* Тип шрифта */
    font-size: 11px; /* Размер текста в пикселях */
    }

    .shine:hover {
    box-shadow: 0 0 15px #00aaff;
    transition: box-shadow 0.5s;
    }

    [​IMG]

    [​IMG]

    [​IMG]
    --- Добавлено, 26 авг 2016 ---
    В общем с вопросом тени разобрался, нужно было правую картинку отображать по правому краю и всё. теперь проблема, когда добавляю стену между двумя картинками

    Во первых стена добавляется через несколько пикселей от левой картинки, а правая так вообще переносится вниз
    [​IMG]
    --- Добавлено, 26 авг 2016 ---
    Получается нужно сделать как-то, чтобы стена была позади обеих картинок (чтобы тень от картинок появлялась поверх стены)
    Это нужно для того, чтобы создавалось ощущение выбора
     
    fack3637363s, 26 авг 2016
    #1
  2. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    Perat, 26 авг 2016
    #2
  3. fack3637363s

    fack3637363s

    Регистрация:
    26 авг 2016
    Сообщения:
    8
    Симпатии:
    0
    Не разобрался как сделать эту картинку посередине
    [​IMG]
    https://jsfiddle.net/vvyz0hty/1/

    Еще белая картинка почему то отображается меньше по высоте, чем черная. Хотя они идентичны по размерам
     
    fack3637363s, 26 авг 2016
    #3
  4. Perat

    Perat

    Регистрация:
    27 окт 2015
    Сообщения:
    115
    Симпатии:
    26
    https://jsfiddle.net/vvyz0hty/2/ сделать у картинки одинаковыми (сейчас 913 × 979 pixels и 930 × 979 pixels) , ил сделать фиксированный размер картинок
    --- Добавлено, 26 авг 2016 ---
    понял, что ты хочешь https://jsfiddle.net/vvyz0hty/4/
     
    Perat, 26 авг 2016
    #4
  5. fack3637363s

    fack3637363s

    Регистрация:
    26 авг 2016
    Сообщения:
    8
    Симпатии:
    0
    Спасибо поставить почему-то не могу еще, так что только на словах.
    Спасибо большое за разъяснение, всё получилось!
    --- Добавлено, 26 авг 2016 ---
    Почему не получается сделать внутреннюю тень?

    https://jsfiddle.net/vvyz0hty/6/
     
    fack3637363s, 26 авг 2016
    #5
< Вертикальный разделитель | Помогите восстановить меню, пожаааалуйста!!! >