как сделать чтобы при наводке на <p>, выходила картинка центрированная по центру текста, а не слевого верхнего угла текста см рисунок
использовать ховер не элемента p, а родительского. Почитайте, посмотрите на сайтах, как это правильно делать.
А вы честно чего хотите? Научиться чему-то или преследуете другую цель? Наверно можно по-другому. Но вряд ли такой код будет валиден. И лично я, честно, даже думать над такими костылями не хочу.
Можно на JSе накостылячить, но лучше так не делать, если можно на CSS, а на CSS можно. Курите методы позиционирования.