HTML+CSS+JavaScript

Это только пример, чтобы понятен был механизм. Opacity - это прозрачность блока, чтобы если накладывать на изображение, то он бы слегка просвечивался (можно и не делать этого)

Через псевдоэлемент after конечно не удобно будет хотя бы потому, что текст различен. Но вам никто и не советует делать так в этом случае, с таким же успехом при hover можно делать видимым любой иной дочерний элемент элемента родительского, то есть содержащего и изображение, и блок текста. Можно и транзакцию добавить, и тогда будет и с анимацией в новых браузерах, и все это всего лишь CSS без всяких скриптов. Но для этого нужно при выводе страницы сразу выводить и их блоки описания, которые по умолчанию имеют стиль display:none, а при hover родительских элементов изменяются на block.
Иначе нужен активный сценарий обрабатывающий наведение и уход мыши, добавление блока родительскому элементу с запросом текста у сервера.

Но если убрать "opacity: .7; " то мы получим просто черный квадрат который закрывает изображение. Потом, каждая фотография имеет три параметра описания, как их позиционировать через "content:"? а если фотографий 10, то для каждой нужно прописывать свой "li #foto1:hover:after"?

флоат:лефт, оверфлоу:ауто - не дай бог, если такое действительно в CSS возможно будет )
Переключить раскладку трудно?

Не важно сколько у вас там в ряду, и какое у вас обтекание, важно понимать что к чему будет привязано, Допустим, что вывод происходит а элементы LI. Этим элементам нужно задать position: relative;, а дочерним элементам с выводимым текстом position: absolute;. С помощью after это все можно стилями описать:

<style> ul {     list-style: none;     padding: 0;     margin: 0; } li {     position: relative;     display: inline-block; } li img {     display: block;     width: 180px;     height: 120px; } li:hover:after {     content: "This image";     position: absolute;     bottom: 5px;     left: 5px;     padding: 8px;     background: #000;     color: #fff;     opacity: .7; } </style> <ul>     <li><img src="as.jpg" /></li>     <li><img src="as.jpg" /></li>     <li><img src="as.jpg" /></li> </ul>

Изображения разложены по 7 штук в ряду, соответственно я им задал "флоат:лефт" а родительскому блоку, чтобы он растягивался, задал "оверфлоу:ауто" и когда я вывожу на экран блок с абсолютным позиционированием, то он "перетасовывает" все остальные блоки и добавляет полосу прокрутки материнскому блоку.
Как вызвать абсолютный блок при наведении на одну из фотографий так чтобы он никак не повлиял на остальные блоки?

напишите в блог леблядеву, авось переделает

А меня бесит этот эффект на яндексе. Вот если бы картинка увеличивалась. А так - только
закрывает собой рядом стоящие. Если уж я пришла на поиск картинок, то мне интереснее
получше рассмотреть саму картинку, а не ее данные, чтобы понять нужна она мне или нет.

У блоков в котором изображение должны иметь позиционирование relative, а вот у информационного блока absolute, причем это не обязательно создавамый блок должен быть, а задаваться посредством hover:after, правда старенькие браузеры могут такой блок и не обработать.
Если у каждого изображения свой текст, и это большие объемы, значит асинхронным запросом получать текст с сервера и выводить его в этот создаваемый блок.
Либо высчитывайте по наведению позиционирование изображения и добавляйте такой блок телу документа, если вам не нравится первое.

Задавать блокам абсолютное позиционирование и менять "з-индекс" при наведении, не подойдет, так как неизвестно сколько блоков будет на странице. Я вывожу их циклом из БД, поэтому их может быть сколь угодно.

смотрите в сторону позиционирования

Всем привет!
Подскажите пожалуйста, кто знает, как сделать такой эффект как в Яндекс картинках. То-есть: При наведении на картинку появляется блок тёмного цвета с ее описанием, при этом не затрагивая соседние блоки.