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

👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Создай свой первый сайт на WordPress

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

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

    Ответить