JSFiddle - React, Tailwind, and code Playground

HTML

<div class="speech" id="what_timetable" data-trans="../images/existing_installations_blue.png"></div>
<div class="speech" id="existing_installations" data-trans="../images/existing_installations_blue.png"></div>

CSS

.speech {
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
width: 301px;
height: 227px;
float:left;
}

#what_timetable {
background-image: url('http://www.erpfans.co.uk/test/images/what_timetable.png');
}

#what_timetable:hover {
background-image: url('http://www.erpfans.co.uk/test/images/what_timetable_blue.png');
}

#existing_installations {
background-image: url('http://www.erpfans.co.uk/test/images/existing_installations.png');
}

#existing_installations:hover {
background-image: url('http://www.erpfans.co.uk/test/images/existing_installations_blue.png');
}