Помогите пожалуйста решить CSS задачки.

Есть тестовый сайтик один. Задача номер 1 — корректное отображение паспорту у картинок с выводом заголовка title в этом же паспорту.
Пример по адресу — test.chocolate-kiss.ru/tvorozhnye-oladi-s-yablokami

Особенно криво съезжает паспорту вправо в Опере. В Хроме справа отступ больше, чем слева у паспорту.

Вот код, который отвечает сейчас за это дело:

/* Captions */.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{
padding: 20px; /* Ширина паспарту */
background: #f0f0f0; /* Цвет фона  паспарту */
}
.wp-caption img{
padding: 20px; /* Ширина паспарту */
background: #f0f0f0; /* Цвет фона  паспарту */
}
.wp-caption p.wp-caption-text{font-size:13px;color:#4f2c2c;line-height:15px;padding:0 30px 5px;margin:0;}
/* End captions */

Задача номер два.
Главная страница — test.chocolate-kiss.ru
На ней располагается сетка рецептов с ссылками на записи. Эти картинки — миниатюры WordPress.
Задача — при наведении курсора должна всплывать подсказка (title) в виде полупрозрачного фона с радиусом (по сути круг), поверх самой картинки. Сейчас же этот радиус криво, но всплывает, правда в сторонке от картинки. Как его привязать к картинке точно?
Вот CSS сейчас:

.search-img {overflow:hidden; padding:0px; margin:0 1px 1px 0; float:left; width:150px; height:150px; background:#000; font-size:14px; font-weight:normal; text-align:center;line-height:2em;
-moz-border-radius: 75px; /* Для Firefox 3 */
-webkit-border-radius: 75px; /* Для Safari 4 и Chrome */
border-radius: 75px; /* Радиус скругления */

   }
.search-img:hover::after {
width:150px; height:150px;
-moz-border-radius: 75px; /* Для Firefox 3 */
-webkit-border-radius: 75px; /* Для Safari 4 и Chrome */
border-radius: 75px; /* Радиус скругления */

    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Позиционирование */

    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 11px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметры рамки */
   }

Задача номе три. По сути это часть второй задачи. Дело в том, что в Опере картинки ни в какую не хотят отображаться круглыми.