How to create a hover over text to reveal image effect with only CSS

.img-one {
    display: none;   
    position: absolute;
 
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  right: 35%;
  z-index: 10;
}

.text:hover > .img-one {
    display: block;
	position: absolute;
    z-index: 1;
    cursor: pointer;
    transition: all 0.5s ease-in;
}

.img-one:hover {
    transition: all 0.9s ease;
}

.text:hover  {
    cursor: pointer;
    background-color: black;
    transition:all 0.5s ease-in;
    
}

.text:hover .paragraph-scroll  {
     color: #FFFFFF !important;
}

.text:hover .elementor-heading-title  {
     color: #FFFFFF !important;
}