Tytuł raczej dużo nie mówi, ale chodzi o to, że chcę uzyskać efekt przyciemniania obrazków po najechaniu na nie kursorem.
Założenie było takie, że wstawiam w diva odnośnik i obrazek, odnośnik pozycjonuję absolutnie, szerokość i wysokość ustawiam na odpowiadające wartości z obrazka i przy najechaniu kursorem za pomocą :hover, ustawiam tło odnośnika na półprzezroczysty png. Wszystko działa pięknie w chrome i firefoxie, problem występuje w operze, tam odnośnik jest cały czas jakby pod obrazkiem i w ogóle nie można w niego kliknąć więc efekt hover też się nie aktywuje. Jakieś pomysły jak to naprawić? z-index nie pomaga.

Edit: jeśli nie będzie możliwości naprawić tego w css, to może jakieś rozwiązanie w js?

O ile dobrze zrozumiałem o co Ci chodzi, może po prostu ustaw czarne tło pod obrazkiem i zmieniaj opacity?

opacity działa we wszystkich przeglądarkach?

Edit: tak czy siak, nie rozwiązuje to do końca mojego problemu, bo nie napisałem w pierwszym poście, ale na innym obrazku chcę zrobić to samo, z tym że w dodatku ma się wyświetlać na nim tekst.

ciągle opacity rozwiązuje twój problem.

Kombinuj z tym box-shadow żeby był efekt przejścia możesz zastosować też funkcję "transition"
Przykład :
-webkit-transition:All 0.3s ease-in-out;
-moz-transition:All 0.3s ease-in-out;
-o-transition:All 0.3s ease-in-out;

@r4xz w drugim wypadku opacity nie rozwiązuje mojego problemu, wrzucę przykładowy kod, żeby to zobrazować:

[HTML] pobierz, plaintext 
<div id="photo">
    <a href="#">Przykladowy tekst</a>
    <img src="#" />
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#photo
{
    position: relative;
    height: 400px;
    width: 400px;
}
#photo a
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    color: transparent;
}
#photo a:hover
{
    color: #fff;
}
[CSS] pobierz, plaintext 

o ile w przypadku zwykłego obrazka mogę zastosować hover dla samego img to w tym wypadku, żeby pokazać tekst muszę zrobić hover dla <a>, no a jak już pisałem <a> w oprzerze jest wyświetlane jakby pod obrazkiem.

@MrCoody, css3 narazie sobie odpuszcze z wiadomych powodów.

dodaj może #photo: hover np.:

[CSS] pobierz, plaintext 
#photo:hover
{  background: black;
    position: relative;
    height: 400px;
    width: 400px;
}
[CSS] pobierz, plaintext 

Nak najedziesz na obrazek to tło się zmieni na czarne

ALBO :

[CSS] pobierz, plaintext 
img:hover
{  background: black;
    position: relative;
    height: 400px;
    width: 400px;
}
[CSS] pobierz, plaintext 

Jak nie działa to nie wiem o co Ci chodzi

Daj #photo czarne tło, wrzuć obrazek i tekst w dodatkowy div i rób hover dla tego dodatkowego diva.

mogło by być też w js np.:

w headzie :

[JAVASCRIPT] pobierz, plaintext 
<script type="text/javascript">
function startIt() {
	var oImg = document.getElementById('image');
	oImg.style.bgcolor = 'black';
}
 
function stopIt() {
	var oImg = document.getElementById('image');
		oImg.style.bgcolor = '';
}
</script>
[JAVASCRIPT] pobierz, plaintext 

i kod w htmlu :

[HTML] pobierz, plaintext 
<img onmouseover="startIt()" onmouseout="stopIt()" id="image" src="zdjecie.jpg" />
[HTML] pobierz, plaintext 

POMOGŁEM