How to add box shadow on rollover

  • Resolved carterkay

    (@carterkay)


    5 years, 4 months ago

    Hello,

    I am trying to add a box shadow rollover effect to a blog module, so in the normal state the module has no shadow, then on rollover a box shadow fades in, is this possible with adding some code?

    I am thinking this might be JavaScript job?

    Please see the attached image for details.

    Thanks,
    Christian

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Tammie Lister

    (@karmatosed)

    5 years, 4 months ago

    I think you can do this without using JavaScript. My thinking is using a combination of CSS box shadow and transitions. I found this article and perhaps it could be something to explore: http://tobiasahlin.com/blog/how-to-animate-box-shadow/. In that it using hovering to add the style.

    zmmccrocklin

    (@zmmccrocklin)

    5 years, 4 months ago

    You can do this in pure CSS. You can use a property for the div class or id with a hover state:

    (. or #)elementblock:hover {
   box-shadow: 5px 5px 5px grey;
}

    This is a straight change with no transition effect, so if you want it to fade in & out you have to add the transition property. 

    (. or #)elementblock {
   transition: box-shadow .5s;
}
    • This reply was modified 5 years, 4 months ago by zmmccrocklin.
    Thread Starter carterkay

    (@carterkay)

    5 years, 3 months ago

    Thanks Tammie and zmmccrocklin… I went with the great article on http://tobiasahlin.com

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add box shadow on rollover’ is closed to new replies.