- This topic is empty.
-
AuthorPosts
-
November 15, 2016 at 12:52 pm #247874
knbfoster
ParticipantHello,
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
November 15, 2016 at 1:09 pm #247875Beverleyh
ParticipantIf 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).
November 15, 2016 at 1:15 pm #247877knbfoster
ParticipantSorry about that… Here is the code:
November 15, 2016 at 2:22 pm #247890Beverleyh
ParticipantWell, 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.
November 15, 2016 at 4:48 pm #247901knbfoster
ParticipantI 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
November 15, 2016 at 5:56 pm #247907Chris Coyier
KeymasterHere ya go:
November 16, 2016 at 9:34 am #247924knbfoster
ParticipantThat’s perfect! Thank you so much!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.