How can I control css transitions and animations with JS?

I have an image that goes from opacity 0 to 1 when a bit of text is hovered. I would like the transition to be smooth, something similar to css transition. Cant really figure out how to make this happen, so any help would be appreciated.

the js looks like this:

    document.getElementById("text-hover").addEventListener("mouseover", imageTransition);
document.getElementById("text-hover").addEventListener("mouseout", imageTransitionOut);
function imageTransition() {
    document.getElementById("pic").style.opacity = "1";
}
function imageTransitionOut() {
  document.getElementById("pic").style.opacity = "0";
}