[Delpix]

Хочу чтоб в моем портфолио (то что в подписи) изначально все изображения были черно-белыми , а при наведении - цветными. Помогите реализовать.

Сейчас картинки становятся зелеными и код выглядит так:

Код HTML:

.post_home {width: 145px; float: left; margin: 0 0 30px 15px;}
.thumb {display: block; width: 145px; height: 145px; margin-bottom: 5px; position: relative; color: #333;}
.thumb img {display: block;}
.thumb span {display: block; width: 145px; height: 145px; position: absolute; top: 0; left: 0; background: #98c82d;}
.post_home h2 {font-size: 11px; font-weight: bold;}
.post_home h2 a {color: #ccc; text-decoration: none;}
.post_home h2 a:hover {color: #98c82d;}

[DarkAngel-163]

Необходимо, чтобы было 2 изображения, одно чёрно-белое (легко можно сгенерировать из изходного php-функцией

PHP код:

imagefilter("image.jpg", IMG_FILTER_GRAYSCALE) 


, другое цветное.
Одно вложить в другое с абсолютным позиционированием.
И при наведении, как и у Вас, менять opacity с помощью JS.

А как сейчас реализовано у вас, (извините меня конечно) но это не изменение цвета на зелёный. Если вы на фотографию наклеите полупрозрачную серую плёнку, сама же фотография не станет чёрно-белой, верно?))


Но, тем не менее, вот что нужно изменить для того, что вы хотите.

в файле wp-content/themes/portfolium/js/script.js

Код HTML:

$('.thumb span').css('opacity','0.45');
        $('.post_home a:first-child').hover(function(){
            $(this).find('span').stop().animate({opacity: 0}, 200);
            $(this).nextAll().find('a').css('color', '#fff18f');
        }, function(){
            $(this).find('span').stop().animate({opacity: 0.45}, 200);
            $(this).nextAll().find('a').removeAttr('style');
        });

в файле стилей

Код HTML:

.thumb span {display: block; width: 145px; height: 145px; position: absolute; top: 0; left: 0; background: #ссс;}

строка 67

[xilgiz]

А нельзя hover воспользоваться?
Конечно, для каждого фото отдельно придется прописывать... муторно, но точно будет работать

[DarkAngel-163]

xilgiz, hover делает мгновенно, а у тут плавное изменение значения opacity.

[pingvincible]

Как вариант:

_http://webdesignerwall.com/demo/html5-grayscale/
_http://www.photoshop-plus.co.uk/2012/05/21/jquery-color-fade-hover-effect/

[Delpix]

DarkAngel-163, Извините, а это уже готовый код или вы просто подсказали что нужно редактировать? Просто я вроде заменил строки в обоих файлах, а ничего не произошло.

[pingvincible]

У вас в стилях .thumb span на 67 строке background: #ccc, вот эти вот ссс написаны русскими буквами ,поэтому не воспринимает их браузер и помечает свойство некорректным.

Ну и все равно это не такой эффект, как вы хотите. Этот самый span, я так понимаю, должен содержать черно-белую картинку, которая будет поверх цветной, а не просто серый цвет.

Внутрь span надо вставить ту же картинку, как-то применив эту функцию, как сказал DarkAngel-163:

PHP код:

imagefilter("image.jpg", IMG_FILTER_GRAYSCALE) 


[Delpix]

Этот самый span, я так понимаю, должен содержать черно-белую картинку, которая будет поверх цветной, а не просто серый цвет.

Да, хотелось бы именно черно-белое

[pingvincible]

Не слишком силен в написании крутых php скриптов, но вот так хотя бы работает, можно взять за основу:

PHP код:

<?php
//В результате выполнения кода создастся картинка черно-белая 1g.jpg, которая будет лежать в той же папке, что и цветная

$im = imagecreatefromjpeg("1.jpg");
if($im && imagefilter($im, IMG_FILTER_GRAYSCALE))
{
        imagejpeg($im, '1g.jpg');
}
imagedestroy($im);
?>

Дальше выводите эту картинку внутри своего span в качестве бэкграунда.

[andre2012]

PHP код:

#sitename a {
    background: url("../images/logo.png") no-repeat scroll left center transparent;
}
#sitename a:hover {
    background: url("../images/logohov.png") no-repeat scroll left center transparent;
} 


_
Пример был для логотипа сайта вместо "../images/logo.png" ссылка на картинку которая будет без наведение на нее
_
/images/logohov.png" ссылку на картинку которая будет при наведение