Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
Daniel KulbeThere 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 helpsComment #2
gori4ka CreditAttribution: gori4ka commentedThanks 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.
Comment #3
anchit_new CreditAttribution: anchit_new commentedHello,
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.
Comment #4
jenlampton@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.