Улучшения выдвижного блока. CSS + jQuery
 

Доброго дня Добрые и отзывчивые люди!

В общем начинаю описывать ситуацию. Есть у меня инет магазинчик ,недавно его начал делать так что сильно не пугайтесь) , я вот тут решил сделать покрасивши свой выдвижной блог (консультант)

Хочу добиться такого эфекта когда наводишь на картинку она меняется! (специально для этого я нарисовал две картинки)
А как это дело реализовать я не знаю.

Так же ябы хотел чтобы блок был полупрозрачный а кнопка нормальная.

Дорогие мастера помогите реализоваться! :-?

Вот скелет моего блока
http://growercity.ru/catalog/view/ja...ideout.v1.2.js

<script src="catalog/view/javascript/jquery.tabslideout.v1.2.js" type="text/javascript"></script>

<script type="text/javascript">

И сам JavaScript

<script type="text/javascript">
$(function(){
	$('.panel').tabSlideOut({							//Класс панели
		tabHandle: '.handle',						//Класс кнопки
		pathToTabImage: 'button.gif',				//Путь к изображению кнопки
		imageHeight: '122px',						//Высота кнопки
		imageWidth: '40px',						//Ширина кнопки
		tabLocation: 'right',						//Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
		speed: 300,								//Скорость анимации
		action: 'click',								//Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
		topPos: '200px',							//Отступ сверху
		fixedPosition: false						//Позиционирование блока false - position: absolute, true - position: fixed
	});
});
</script>

.panel {
width: 200px;
background: #6D6D6D; /* Цвет фона */
padding: 5px; /* Поля вокруг текста */
color: #fff; /* Цвет текста */
border: #6E6E6E 1px solid;
}