При наведении действие другому объекту CSS3

[krog1990]

Доброго времени суток! помогите! такая задача:

<p>
    <link rel="stylesheet" type="CSS/text" href="CSS/repertory.css" />
</p>
<div id="background"><img src="images/Content/texture2.jpg" /></div>
<div class="spektakl">
    <div class="spektakl" id="photo"><img src="images/content/spektakli-2/001.png" /></div>
    <div class="spektakl" id="table"><img src="images/spektakli/table.png" /></div>
</div>

id="photo" - картина
id="table" - табличка с названием картины (золотая такая =))
как мне сделать так, что бы:
видна только картина, а при наведении на нее выпадает табличка а сама картина выполняет вращение одновременно

#photo{-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	-o-box-shadow:0px 0px 40px #000;
	-moz-box-shadow:0px 0px 40px #000;
	-webkit-box-shadow:0px 0px 40px #000;}

#table{
 transform: translate(0,50px);
    -webkit-transform: translate(0,50px);
    -o-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
}

Кто может помочь? как лучше оформить код для этого, при условии что эти картины по 2-3 ряд будет (я про позиционирование)
Заранее спасибо!

[Кольша]

На css врятле такое получется, а вот на js только в путь

<p>
    <link rel="stylesheet" type="CSS/text" href="CSS/repertory.css" />
</p>
<div id="background"><img src="" /></div>
<div class="spektakl">
    <div class="spektakl" id="photo" onMouseOut='document.getElementById("table").style.display="none" ;' onMouseMove='document.getElementById("table").style.display="block" ;'><img src="fone-tr.png" /></div>
    <div class="spektakl" id="table" onMouseOut="document.getelementbyid('table').style='display:none'"  style="display:none"><img src="mainicon.gif" /></div>
</div>

P.S картинки сами свои подставите...с вращение помочь немогу.

[KPEATuBHO]

HTML:

<div class="spektakl hoverable_wrapper">
    <div class="spektakl" id="photo"><img src="images/content/spektakli-2/001.png" /></div>
    <div class="spektakl" id="table"><img src="images/spektakli/table.png" /></div>
</div>

CSS:

div.hoverable_wrapper:hover #photo{-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	-o-box-shadow:0px 0px 40px #000;
	-moz-box-shadow:0px 0px 40px #000;
	-webkit-box-shadow:0px 0px 40px #000;}

div.hoverable_wrapper:hover #table{
 transform: translate(0,50px);
    -webkit-transform: translate(0,50px);
    -o-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
}

[Naive]

В css нельзя обращаться к родительским элементам, а как следствие и к соседним (пруф).
Вариант от KPEATuBHO — единственный выход.
UPD:

div.hoverable_wrapper:hover #photo{-webkit-transform: rotate(-12deg);
	-moz-transform: rotate(-12deg);
	-o-transform: rotate(-12deg);
	-o-box-shadow:0px 0px 40px #000;
	-moz-box-shadow:0px 0px 40px #000;
	-webkit-box-shadow:0px 0px 40px #000;}

div.hoverable_wrapper:hover #table{
 transform: translate(0,50px);
    -webkit-transform: translate(0,50px);
    -o-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
}

Свойства без вендорного префикса ставятся после вендоров, делается это по причине того, что основные свойства w3c должны перекрывать старые вендорные пробные свойства браузеров; в первом списке не хватает безвендорных теней и трансформов; нет вендора для ИЕ9 (-ms-) и для трансорма можно добавить фильтр для старых ИЕ.

[krog1990]

Спасибо огромное! на Всю жизнь запомню!! Сейчас поиграю с эффектами! Жаль что далеко не все браузеры тянут хорошие эффекты. один хром за всех работает! надеюсь это временно =))
Еще раз спасибо ВАМ!!!

Кольша, KPEATuBHO,Naive

[Naive]

один хром за всех работает

ну вот неправда...
эти свойства поддерживают все современные браузеры и даже ИЕ (9+ для младших можно использовать фильтры) ...
фф4+ с вендорами, 8+ без *
опера 8+ с вендорами 11+ без *
сафари 3.1+ с вендорами, 5 — без *
ИЕ 6-8 фильтр, 9 вендор, 10 — без
хром 5+ с вендорами, 12+ без*
* - по наблюдениям, за точность не ручаюсь...
зы, у хрома есть еще 3D трансформ... на современных компах смотрится симпотично)

UPD:

как лучше оформить код для этого, при условии что эти картины по 2-3 ряд будет

Для родителя position:relative; для появляющейся фигни position: absolute, поиграй с top & left || right & bottom

[Naive]

один хром за всех работает

ну вот неправда...
эти свойства поддерживают все современные браузеры и даже ИЕ (9+ для младших можно использовать фильтры) ...
фф4+ с вендорами, 8+ без *
опера 8+ с вендорами 11+ без *
сафари 3.1+ с вендорами, 5 — без *
ИЕ 6-8 фильтр, 9 вендор, 10 — без
хром 5+ с вендорами, 12+ без*
* - по наблюдениям, за точность не ручаюсь...
зы, у хрома есть еще 3D трансформ... на современных компах смотрится симпотично)