Tricky CSS Hover Effect…

[knbfoster]

Hello,
I’m new to the forum and I’m hoping somebody can help me figure out a tricky effect I’m trying to accomplish. I basically have an icon with text underneath it. When you mouse over the icon I would like there to be a border that animates on (maybe just fade in or something simple). I would also like there to be a “Learn More” button to appear within the border below the icon and text.

You can see what I would like to do at http://bigfishmediaweb.com/cssSample.jpg.

Thank you!

Brett

[Beverleyh]

If you provide your code for the non-animated version of the icon/border/button in CodePen, we can help give you pointers on how to add the transitions. But you need to give us your code to work with as a starting point – just a reduced demo of one sample icon (not a whole page).

[knbfoster]

Sorry about that… Here is the code:

http://codepen.io/knfoster/pen/VmKYNg

[Beverleyh]

Well, we only really need one icon (i.e. just enough HTML and CSS to demonstrate the problem), and I don’t see your “learn more” button in there anywhere. I thought that you only needed help with adding a fade transition to an existing border and button (or rather just the button now since you’ve added the border effect already)? Makes it harder for us if you don’t include all the elements.

[knbfoster]

I certainly am not trying to make it more difficult on anyone. I didn’t have the learn more button created yet because I don’t exactly know how to add it into the current hover effect. Thus, the reason I’m on this forum. I just went back and added it to the code and removed all the other icons. Here’s the link again… http://codepen.io/knfoster/pen/VmKYNg

I apologize if I didn’t communicate clearly. I’m trying to make a learn more button appear only when you hover. The link I sent earlier should show you what I want it to look like when someone hovers. Hopefully that makes a little more sense.

Thank you

[Chris Coyier]

Here ya go:

http://codepen.io/chriscoyier/pen/qqaNNO

[knbfoster]

That’s perfect! Thank you so much!

[Author]

Posts