WordPress миниатюра наложения цвета при наведении

Question

У меня есть этот код на моем WordPress сайте для превращения «Избранного изображения» в миниатюру:

<div class="portfolio-item">
<?php
if ( has_post_thumbnail()) {
echo '<a href="' . get_permalink($post->ID) . '" >';
the_post_thumbnail();
echo '</a>';
}
?>
</div>

Вот как выглядит сайт так далеко: http://www.steakmob.com/porftolio/

Мне бы хотелось, чтобы изображения имели красное наложение на состояние наведения. Как мне этого добиться? Я пробовал другие учебники, но я не знаю, как адаптировать jQuery и / или Javascript для WordPress и моего конкретного кода. Спасибо!

Answer 1

Как я уже сказал в комментарии, вы должны использовать имя класса для элемента портфолио, а не идентификатор.

Сказал, что вы можете использовать этот код для наложения изображений в верхнем углу с красным div:

$(function(){
    $("#portfolio-content .portfolio-item").hover(function(){
        var curElem = $(this).children(); // current image
        $('<div />').addClass('overlay')
                    .css('width',curElem.css('width'))
                    .css('height',curElem.css('height'))
                    .prependTo($(this).children('a'));
        return false;
    }, function(){
       $(this).children('a').children('.overlay').remove();
    });
});

Вот рабочая скрипка:

http://jsfiddle.net/wus7H/1/

Answer 2

Андре прав.Чтобы ответить на ваш вопрос, я хотел бы рассмотреть вопрос об уменьшении изображения с помощью jQuery, чтобы фон тега отображался, а изображение было скрыто.

Например:

$(".portfolio-item a").hover(
  function () {
    $(this).find('img').fadeOut("fast");
  }, 
  function () {
    $(this).find('img').fadeIn("fast");
  }
);

Необходимо убедиться, что ваш элемент настроен для отображения: блок, с шириной и высотой.Вы также можете рассмотреть возможность использования плагина hover intent .