Создание миниатюр с помощью Overflow

    Контролирование размера миниатюр на вашей странице. Т.е. ограничение размера поумолчанию, и показ их полного размера при наведении мышкой.

    Это не изменение размера изображения, а только лишь изменение размера его видимой части.

    Изменение размера миниатюры при наведении мышкой

    UPD: было оказывается, но да ладно...

    Идея заключается в том чтобы поместить изображение в некий контейнер (в данном случае это будет ). Мы задаем размер (высоту и ширину) контейнера (position="relative"). Изображение вставляем внутрь (position="absolute"), используем отрицательные top и left значения чтобы выровнять изображение. У контейнера выставляем overflow значение hidden, это позволяет видеть только ту часть изображения, котрая находится внутри контейнера, остальное будет скрыто. При наведении мыши (a:hover) мы меняем overflow значение на visible и показываем полнуй картинку.

    Идея способа

    Сдесь я опишу способ как для списка миниатюр так и для одиночных.

    в качестве отображения изображения используем стандартный тег:
    наша картинка


    Стандартные настройки должны выглядеть примерно так: (выставляйте свои значение top left для нужного для вас положения всей картинки)
    ul#thumbs a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }

    ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }


    Так же можете выставить парметры положения для каждой картинки свои, или определенное место для отображения всех картинок в списке.
    ul#thumbs a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }
    ul#thumbs li#image1 a img{
    top:-28px;
    left:-55px;
    }
    ul#thumbs li#image2 a img{
    top:-18px;
    left:-48px;
    }
    ul#thumbs li#image3 a img{
    top:-21px;
    left:-30px;
    }
    .
    .
    .


    Выставляем параметр overflow при наведении мышки
    ul#thumbs a:hover{
    overflow:visible;
    z-index:1000;
    border:none;
    }


    Так же вариант для единичной миниатюры:
    p.thumb{
    float:left;
    margin:.5em 0;
    margin-right:10px;
    border:1px solid #999;
    padding:2px;
    }
    p.thumb a{
    display:block;
    float:left;
    width:100px;
    height:100px;
    line-height:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    }
    p.thumb a img{
    float:left;
    position:absolute;
    top:-20px;
    left:-50px;
    }
    p.thumb a:hover{
    overflow:visible;
    z-index:1000;
    border:none;
    }
    p.thumb a:hover img{
    border:1px solid #999;
    background:#fff;
    padding:2px;
    }


    Ну и вывод всего этого:
    Список:


    Единичный:



    Оригинальность идеи принадлежит «Alen Grakalic»
    Share post

    Comments 14

      0
      было уже тут. если хотите, могу у себя из избранного ссылку достать.
        0
        Спасибо, жаль не видел...
          0
            +1
            да, спс, понял уже.
            Я здесь еще только добавил единичный вывод, может кому пригодится.
              0
              Это да :)
          +1
          Спасибо! ИМенно это сейчас ищу)))))
            0
            Тут минус в том, что нельзя чтоб visible вариант закрывал бы соседнюю миниатюру, иначе будет совсем неудобно.
              0
              ну дак тут расчитано на то чтобы это были именно миниатюры, т.е. большие картинки неудобно выкладывать этим способом, потому что иначе вариант hidden будет слишком непонятен, например одна рука или честь кузова машины, поэтому лучше hidden картинки делать небольшие, а при клике разворачивать полную версию.
              0
              А мне нравится идея, ведь она работает даже при отключенном javascript, что немаловажно
              • UFO just landed and posted this here
                  0
                  Повторю, то что писал в прошлом коменте. Это сделано и удобно для миниатюр (ключевое слово миниатюр). Например, пользователи закачивают фотографии, они все разные по штрине и высоте. Или например, у вас есть превьюшки 50-ти альбомов от CD, и вам их нужно компакто уместить, они все размером 150х150, и что вы будите делать? увеличивать страницу или уменьшать до 50х50 не давая тем самым пользователям ничего разглядет пока не ткнут на полную картинку?
                  Ценность этого примера в том что он не обрезает превьюшку картинки какой бы она не было по ширине или высоте, а лишь скрывает. Меня вот например бесит когда превью от фотографий обрезают и урезают и нужно ткнуть и и скачать всю чтобы стало понятно что это. + здесь есть вариант для одной картинки, например это может быть картинка в новости о политике, где они частенько бесят.
                  • UFO just landed and posted this here
                    0
                    кто будет размещать 45 таких картинок подряд? гыы это ж изврат))
                  0
                  Альбом The Severely Departed, которая располагается на 1 плане очень даже хорошо.

                  Only users with full accounts can post comments. Log in, please.