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:

Username:   Password:
Locked Topic
[ C ] Spotlight hovered text
Topic Started: May 18 2012, 12:40 PM (755 Views)
HawkBlade124
Member Avatar
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?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Do you have an example?
Offline Profile Goto Top
 
HawkBlade124
Member Avatar
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.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
That's just a semi-transparent background image with top padding applied to the hover.
Offline Profile Goto Top
 
HawkBlade124
Member Avatar
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.
Offline Profile Goto Top
 
Cory
Member Avatar
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:
Code:
 
#submenu a:hover {
background: url("http://z4.ifrm.com/30315/181/0/p1121728/subglow.png") no-repeat scroll center top transparent;
padding: 35px 37px;
}
As always, CSS can go anywhere in the style sheet as long as it doesn't interfere with specificity.
Offline Profile Goto Top
 
HawkBlade124
Member Avatar
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.
Offline Profile Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

I believe what you mean is the use of the following code:
Code:
 
<script>
if(location.href.match("/search/")) {
$("#submenu a:contains('Search')").addClass("current");
}
if(location.href.match("/members/")) {
$("#submenu a:contains('Members')").addClass("current");
}
if(location.href.match("/calendar/")) {
$("#submenu a:contains('Calendar')").addClass("current");
}
if(location.href.match("/faq/")) {
$("#submenu a:contains('FAQ')").addClass("current");
}
</script>
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:
Code:
 
#submenu a.current {
/* STYLING GOES HERE */
}
Offline Profile Goto Top
 
Steve
Member Avatar
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.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic