You can put the text in three divs with unique id's and use jquery on mouseover events to show/hide those divs when the user hovers your images.
Here's an example I built recently while doing a DailyUI challenge:
http://codepen.io/chadmcartier/pen/rLWLaB
Basically I have a nav bar with text that contains the same characters as the div id's for the objects I wanted to hide and use a function to pull the text from the link and use it to switch the active div.
In your case, as I don't know how much programming/jQuery experience you have it'll be probably be simpler off with seperate commands for each image.
Say you click #img-one: in jQuery your code will look something like this:
Code:
$('#img-one').on('mouseover', function(){
$('.active').hide();
$('.active').removeClass('active');
$('#text-one').show();
$('#text-one').addClass('active');
});
You'll want to set your initial text box with the class 'active', and if you want a smoother transition between the switch you can add a delay before the show() command. You're going to also want to make sure you set your text-two and text-three to display: none in the css.
You could honestly do it with less jQuery if you set up the css on active correctly, but I am way too tired to type that all out right now haha. And if you don't want the text to permanently stay, you can just use css hover pseudo classes to show and hide descriptions, but they will disappear when you stop hovering.
