CSS Hover Transition Question


I’m working on my portfolio project and have a question about using CSS for hover transitions. If you look at my pen, i’ve isolated the part that is giving me trouble. I have an image of a bulldog that when you hover on it, the image changes from black to blue. I would also like my name to fade in. I understand I could add the text directly to the image and make the transition work that way.

My question is:

Is it possible (using only html and css) to hover over a single image and have it transition into a picture and text.

or is it possible to transform the picture to text (without the text being in an image)

Here is a link to this part of my project: https://codepen.io/TuNis08/pen/ZXxEzw?editors=1100

Thanks all! As a new coder, I’d appreciate any feedback.

I figured out the solution. Figure i’d post it if anyone was curious.