Adjust vertical aligment of text for rowspan cells upon hover

Question

I've got an interesting problem here:

There is a table with a handful of cells, some of them have rowspans:

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
| c1 +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

When I hover over a row lets say the first row, I want to display it something like this

+----+----+----+----+
| c1 | c2 | c4 | cx |
|    |    +----+----+
|    |    | c5 | cx |
|    +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

So basically the values of the rowspan cells appear on the same row as the highlighted row.

Here is a jsfiddle with the highlighting working: https://jsfiddle.net/ucarL9e9/1/

So whenever I highlight a row I want to temporary change the vertical alignment of the cell to make it with the row that highlighted. So something like this:

I'm not worried about the color just the value of the cell