html+css

Galanhora · 21 Окт 2015

Здравствуйте,помогите написать html-ку и css к нему.
Короче проблема такова:
есть 6 картинок:
1,2,3
1-1,2-2,3-3
Нужно что бы все 3 картинки стояли в ряд,и при наведении на каждую из них,они менялись на другую.
Например: 1.jpg менялась на 1-1.jpg
Вот тутесть уже готовый пример,только не получается у меня это сделать.
На сайте это "Третий вариант" и картинка внизу.
Для кого то это пустяк,дело 5-ти минут,у меня ушло пол дня так и не получилось

Помогите пожалуйста.

Influence · 21 Окт 2015

что не получается то? может у вас картинки размещаются за пределами видимости?

п.с. Боже, кто же это запихивает стили в html.. так тяжело создать отдельный файл..

Dementor · 22 Окт 2015

Вот, это полностью рабочий код, то что Вам нужно.

HTML:

<!DOCTYPE html>
<head>
    <style>

    #imgages div {
        float: left;
    }

    #image {
        width: 500px;
        height: 500px;
        cursor: pointer;
    }

    #image img {
        position: absolute;
    }

    .image-2 {
        opacity: 0;
          -moz-transition: all 0.5s ease-in-out;
          -webkit-transition: all 0.5s ease-in-out;
          -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
    }

    .image-2:hover {
        opacity: 1;
    }

    </style>
</head>
<boby>

    <div id='imgages'>
        <div id='image'>
            <img src='http://www.egraphic.ru/images/drawing/261/final.jpg'>
            <img src='http://satoriom.ru/wp-content/uploads/2013/10/%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B-%D0%BC%D0%BE%D0%B7%D0%B3%D0%B03-500%D1%85500.jpg' class='image-2'>
        </div>
        <div id='image'>
            <img src='http://www.egraphic.ru/images/drawing/261/final.jpg'>
            <img src='http://satoriom.ru/wp-content/uploads/2013/10/%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B-%D0%BC%D0%BE%D0%B7%D0%B3%D0%B03-500%D1%85500.jpg' class='image-2'>
        </div>
        <div id='image'>
            <img src='http://www.egraphic.ru/images/drawing/261/final.jpg'>
            <img src='http://satoriom.ru/wp-content/uploads/2013/10/%D0%B2%D0%BE%D0%BB%D0%BD%D1%8B-%D0%BC%D0%BE%D0%B7%D0%B3%D0%B03-500%D1%85500.jpg' class='image-2'>
        </div>
    </div>

</boby>

Комментарий:

all 0.5s ease-in-out - красным помечено время смены кадра

#imgages - в нем содержатся все ваши блоки с картинками

#imgage - блок с двумя картинками, присваиваете ему float: left и они будут рядом

.image-2 - это вторая картинка в каждом блоке, она имеет прозрачность 0 (opacity: 0), а так же ей задана плавность анимации для всех браузеров:
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

.image-2:hover - :hover - двоеточие и название означает псевдо-стиль. hover - это стиль при наведении. При наведении придаем прозрачность 1 (opacity: 1). Эффект будет происходить не резко, а плавно, так как выше на объект мы задали плавность

html+css

Дополнительные настройки

Galanhora

Путник

Influence

Величайший

Dementor

Путник

Похожие темы