change hover info

GK User
Thu Oct 18, 2012 5:21 pm
I am trying to change the hover info at products view page, i want to replace the text with an image when the mouse is over the image. I cant find a way to do that can anyone please help me??
User avatar
Junior Boarder

GK User
Thu Oct 18, 2012 5:51 pm
Well there some ways to do it.
CSS3 allows something like this:

Code: Select all
.additional-images .floatleft {position: relative; }
.additional-images a[title]:hover:after {
  content: attr(title);
  padding: 0;
  text-indent: -999em;
  position: absolute;
  width: 30px;
  height: 30px;
  left: 0;
  top: 0;
  z-index: 20px;
  background: transparent url('../images/yourimage.png') no-repeat;
}


In this case, your image should be located on template images directory and have 30x30px size.

I didn't tested very well... but try it.

Cheers
User avatar
Platinum Boarder


cron