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

Автор gelez Опубликовано 13.03.2015 Обновлено 27.12.2016

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

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

gelez

Оцените автора

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

tiaurus 13.03.2015 в 16:46

Это сделано с помощью простейшего кода. Предположим, что у вас миниатюра размером 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 секунде.

Ответить

gelez автор 13.03.2015 в 20:50

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

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

Ответить

tiaurus 14.03.2015 в 00:37

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

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.

Ответить

gelez автор 25.03.2015 в 14:28

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

Ответить