| We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| [ C ] Spotlight hovered text | |
|---|---|
| Tweet Topic Started: May 18 2012, 12:40 PM (755 Views) | |
| HawkBlade124 | May 18 2012, 12:40 PM Post #1 |
|
This is one happy hawk. I love it!
![]() ![]() ![]() ![]() ![]()
|
Board Address: http://w11.zetaboards.com/Themeforum2/index/ Board Software:Zetaboards Description: This code is going to be an interesting one. I would like a code that will gradually give a spotlight from above to the hovered text below. Would that be possible to do? |
![]() |
|
| Cory | May 18 2012, 04:59 PM Post #2 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Do you have an example? |
![]() |
|
| HawkBlade124 | May 18 2012, 05:45 PM Post #3 |
|
This is one happy hawk. I love it!
![]() ![]() ![]() ![]() ![]()
|
hmm... like this maybe? http://s4.zetaboards.com/CNN_Themes/index/?setskin=1308324 Hover the top menu.
Edited by HawkBlade124, May 18 2012, 05:45 PM.
|
![]() |
|
| Cory | May 18 2012, 05:47 PM Post #4 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
That's just a semi-transparent background image with top padding applied to the hover. |
![]() |
|
| HawkBlade124 | May 18 2012, 05:50 PM Post #5 |
|
This is one happy hawk. I love it!
![]() ![]() ![]() ![]() ![]()
|
Oh, and I was wondering what the code for that was and where to place that. Because I thought it looked cool.
Edited by HawkBlade124, May 18 2012, 05:57 PM.
|
![]() |
|
| Cory | May 18 2012, 06:03 PM Post #6 |
|
Member
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
You basically just need to make the semi-transparent background image the way you like and apply the proper padding or width and height (using display: inline-block;) on the links so it accommodates the size of your background image. Here's the CSS they used, as an example:As always, CSS can go anywhere in the style sheet as long as it doesn't interfere with specificity. |
![]() |
|
| HawkBlade124 | May 18 2012, 06:07 PM Post #7 |
|
This is one happy hawk. I love it!
![]() ![]() ![]() ![]() ![]()
|
Okay, and how did they get the image white instead of red? By transition?
Edited by HawkBlade124, May 18 2012, 06:07 PM.
|
![]() |
|
| DaPizzaMan | Jun 17 2012, 04:19 PM Post #8 |
![]()
#TeamSupport
![]()
|
I believe what you mean is the use of the following code: With this, if you were on the FAQ page, the submenu link that redirects to said page will have an added class of .current. You can apply this to the CSS as the following:
|
![]() |
|
| Steve | Jul 30 2012, 02:31 PM Post #9 |
|
patriot
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Completed! Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM. |
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Closed Requests · Next Topic » |
| Track Topic · E-mail Topic |
4:53 AM Jul 11
|


![]](http://b1.ifrm.com/0/1/0/p601690/pipright.png)




4:53 AM Jul 11