n-wp.ru — блог о WordPress

Эффект при наведении на картинку, как на блоге n-wp.ru

У вас при наведении на миниатюру, которая как я понял, выдирается с первого изображения, классный эффект уезжающего изображения как бы назад. подскажите, что за скрипт делает подобное. Заранее спасибо.

4 комментария

  • Это сделано с помощью простейшего кода. Предположим, что у вас миниатюра размером 300 на180 точек. Внутри вывода содержимого поста (например, в index.php):

    В файле style.css:

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

  • спасибо, а как сделать у меня?
    у меня вот такой код

    он выводит первое изображение из поста
    и стилями я его обрезаю так

    на выходе получаю такую конструкцию

    • Попробуйте так.

      php:

      css:

      [cc lang=»css»]
      .post-thumb {
      width:200px;
      height:150px;
      overflow:hidden;
      display:block
      }

      .post-thumb .tumbr img {
      width:300px;
      height:auto;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      }

      .post-thumb:hover .tumbr img {
      width:200px;
      height:auto;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      }

      Если у вас внутри

      ничего нет, то можно картинку из фонового изображения, задаваемого правилами css, вытащить внутрь дива:

      Тогда все проще:

      [cc lang=»css»]
      .thumbr {
      border: 0px solid #333;
      width: 200px;
      height: 150px;
      float: left;
      line-height: 18px;
      margin-right: 7px;
      overflow: hidden;
      padding: 10px;
      }

      .thumbr:hover img {
      width:200px;
      height:auto;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      }

      .thumbr img {
      width:300px;
      height:auto;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
      }

      В этом случае картинки должны быть не меньше 300×225 px.

  • спасибо за помощь, но че то не выходит, забросил идею, пусть уже так будет как есть ((

/* ]]> */