"Like" button styling

brandofamily

OK, I changed my "like" button icon and resized it. The as I read the forum it seemed folks thought there should be some indication that the photo had been "liked." So I did this stuff...

Link to try it... after you hover the icon, click and hold to see the last part clearly...
http://www.brandolinoimaging.com/Image-Galleries/European-Tours/European-Tour-2003/Road-to-Geneva-Including/i-XMns2rJ

If anyone can tell me how to keep the "thanks Icon" I would appreciate it.

/*Change the Like Button Icon*/
.sm-user-ui .sm-gallery .sm-button-image-like {
  background-color: transparent;
  border: 0;
  background-image: url(http://www.brandolinoimaging.com/photos/i-8dJWwvx/0/O/i-8dJWwvx-O.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.sm-user-ui .sm-gallery .sm-button-image-like .sm-fonticon {
  display: none;
}

/*Opacity and Fade for Like Button*/
.sm-user-ui .sm-gallery .sm-button-image-like {
   opacity: .4;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:hover {
   opacity: 1;
   background-image: url(http://www.brandolinoimaging.com/photos/i-LdftqDb/0/O/i-LdftqDb-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.sm-user-ui .sm-gallery .sm-button-image-like:active {
   opacity: 1; 
   background-image: url(http://www.brandolinoimaging.com/photos/i-Grm4pWM/0/O/i-Grm4pWM-O.png);
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}