I love this block, but I need to cutomize it and I don't know how. Please help me if you can.
What I need are different icons with hover effects (I have two sets of icons - for normal state and for hover).

Whatever I do in the css file, either the hard coded icons don't change, or my images show below them. I am using the .otw- classes with "background:url"relative""

.otw-facebook a:hover {

  background:url(../img/fb-32-grau.png) no-repeat;

}

I also tried img, img:hover, .otw-facebook:hover with same results.

Thanks!

Comments

Daniel Kulbe’s picture

There is no chance to change it on hover that way you want it. Try to implement theme_on_the_web_image() in your theme. By default an <img> is rendered, which you can't change by CSS. Or try .on-the-web img {display:none} and set your icon images as background like .on-the-web a{background-image:url(...)} ... Hope this helps

gori4ka’s picture

Thanks for the proposed solution. Right now I have absolutely no time to try it out, but if I do, will come back here and report if it worked.

anchit_new’s picture

Hello,

I wish to use hover effects in commerce kickstart 2 product page. My products have different attributes to show on hover. I am trying to show only images on the product page and on hover name, title and such text should be shown. I have had some success using Rewrite results but I am not able to link different products data to their respective images. Example, i have Photography and Sculpture images. I want sculpture to show weight, colour, name and title. Whereas photography hover should show size, colour, name and title. How do i accomplish this.

Its urgent.
Thanks.

jenlampton’s picture

Status: Active » Fixed

@anchit_new I don't think your question is related to the on_the_web module, but what you want to do is add the HTML for all the fields you you may want to show, and then hide them all with CSS. Then you can use the CSS :hover to show the hidden elements. If you need more help than that you may need to ask in a more appropriate location.

@gori4ka please use the example code on the module page to use simple anchor tags instead of image tags for the social media services. At that point you can add CSS for background images and change them on hover.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.