Show Text and Hide Image on hover column of table angular2

Question

I am using table to display series of items for my data , every data has an action column and on action column there are images I want to hide image and show text when hover on image and vice-versa(show image and hide text) without hover.

app.html

 <tbody>
    <tr *ngFor="let item of mf.data">

      <td >{{item.Title}}</td>
      <td>{{item.CustomerName}}</td>
      <td>{{item.ModifiedDate | date}}</td>
      <td>{{item.RegionId}},{{item.City}}{{item.Country}}</td>
      <td>{{item.BidStatus}}</td>
      <td>
      <label class="col-text"><img src="../../../../assets/app-icons/view.png">View</label>
      </td>
    </tr>
    </tbody>

the last column has label and also the image but want to hide text the text should be only shown when hover on image plus want the functionality with only the hovered column image not with other column images

without hover image is shown

when hover text View is shown

Answer 1

it's pretty simple... update html add span

<label class="col-text"><img src="../../../../assets/app-icons/view.png"><span>View<span></label>

add css/scss

.col-text {
  span {
    display: none;
  }
}

.col-text:hover {
  img {
   display: none;
  }

  span {
    display: inline-block; // or block etc;
  }
}