0

I've been testing the various overlay modules trying to find a simple way to implement a very minimalist designed text I want to display when hovering over my logo img at http://stefanbjorklund.info/.

I'm using Zen 5.x theme

Here's what I want to achieve (see the left side under the logo, nevermind the background-color of the emaillink):

Not hovering over logo

Hovering over logo

1 Answer 1

2

I think that the best way to go is jQuery.

  1. Create new block with text that you want to show
  2. Using CSS, set block position that you want
  3. Set display:none; for that block
  4. Add jQuery script in your block (or implement on some other way).

Script should looks something like:

jQuery("#logo").hover( function () { jQuery("#blockId").fadeIn(); //change the blockId with Id of your block jQuery("#block-views-projects-block").fadeTo(1000,0.5); }, function () { jQuery("#blockId").fadeOut(); //change the blockId with Id of your block jQuery("#block-views-projects-block").fadeTo(1000,1); } );

Of course, if you add this code in your block, it must to be added into <script>...</script> tag.

7
  • This is a perfect and simple solution for the hover script, thanks a bunch. stefanbjorklund.info is updated with this. Do you have a suggestion to how I can get the rest of the site greyed out with CSS as on the mockup above? Commented Aug 25, 2014 at 23:04
  • 1
    I'm not sure what you want to ask me, but I edit my post (added .fadeTo on hover), with this looks much better, text is more readable...
    – mixerowsky
    Commented Aug 25, 2014 at 23:13
  • 1
    Sorry, for some reason I didn't see your entire comment. Use edited script (with .fadeTo) and thats it...
    – mixerowsky
    Commented Aug 25, 2014 at 23:15
  • :) thanks. I hit enter too soon. This works perfectly. One final question. How do I reverse jQuery("#block-views-projects-block").fadeTo(1000,0.5); when 'unhovering' ? Commented Aug 25, 2014 at 23:18
  • 1
    I forgot that :), script is edited...also, number 1000 is speed of animation in ms (1000 = 1 second) so you can change that number to adjunct speed. I think that 400 is default for fadeIn and fadeOut, so you can change that number to 400 and everything will be synced...
    – mixerowsky
    Commented Aug 25, 2014 at 23:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.