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

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

gelez
Оцените автора
Добавить комментарий

  1. tiaurus

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

    <div class="post-thumb">
        <?php the_post_thumbnail('thumbnail'); ?>
    </div>
    

    В файле 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. gelez автор

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

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

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

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

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

    <div style="background: url(http://сайт.ru/wp-content/uploads/2015/03/2015-03-11_170702-550x355.jpg) 0 0 no-repeat;" class="tumbr"> </div>
    Ответить
    1. tiaurus

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

      php:

      <div class="post-thumb">
         <div class="tumbr" style="background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://сайт.ru/wp-content/themes/Hamasaki-wordpress-theme/images/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>
      </div> 
      

      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;
      }
      

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

      <div class="tumbr"></div>

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

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

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

      .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. gelez автор

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

    Ответить