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

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

4 Комментарии

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

    < ?php the_post_thumbnail('thumbnail'); ?>

    В файле style.css:

    .post-thumb {
        width:200px;      /* ширина блока должна быть меньше, чем у миниатюры */
        height:120px;     /* высота блока должна быть меньше, чем у миниатюры */
        overflow:hidden;  /* скрываем все, что выходит за размеры блока */
    }
    
    .post-thumb: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;
    }
    
    .post-thumb 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;
    }
    

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

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

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

    .tumbr{
    	border: 0px solid #333;
    	width: 200px;
    	height: 150px;
        float: left;
    	line-height: 18px;
        margin-right: 7px;
        overflow: hidden;
        padding: 10px;
    }

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

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

      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, вытащить внутрь дива:

      < ?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://сайт.ru/wp-content/themes/Hamasaki-wordpress-theme/images/no-image.gif< ?php } ?>

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

      [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.

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

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*