I would like to make div css background hover effect on my very top menu to white(#fff).
It's not a menu link. It's background(rectangular a little bit transparency table. A full width).
If you use F12, you can see 'div.top-strip.color-site-white'.
My site is http://www.samgyoyu.com/. And I would like to make hover effect like this site. http://www.herschelsupply.com/.
Thank you and have a nice day:)
add following line to your css
#secondary-nav ul li:nth-child(n+2) a:hover
{
color: black;
border-bottom: 2px solid black;
}
Make the background color as transparent
#masthead .color-site-white {
background-color:rgba(255,255,255,.5);
position:fixed;
left: 0;
right: 0;
}
#masthead .color-site-white:hover {
background-color:rgba(255,255,255,1);
}
For IE 7, 8 - This will not support (RGBA) so you must use a png transprent image for background and div:hover also not support for IE so u must use javascript for that.
$("#masthead .color-site-white").hover(function(){
$(this).css({background:'white'});
})
add these lines to your div
.top-strip color-site-white {
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
transition: 0.2s;
}
.top-strip color-site-white:hover {
background-color: #whatever...
}
Related
I'm wanting to have a border bottom transition on my header navigation when the cursor hovers over the links. It was working when I first implemented this, but after adding some more code, I can't get this to work whatsoever.
My CSS looks like this:
a:link,
a:visited {
color: #1c2234;
text-decoration: none;
padding-bottom: 20px;
border-bottom: 3px solid transparent;
-webkit-transition: border-bottom 0.2s, color 0.2s;
transition: border-bottom 0.2s, color 0.2s;
}
a:hover,
a:active {
color: #555;
border-bottom: 3px solid #1c2234;
}
Here's a picture of the header
I know that a common issue with this is not setting the border-bottom prior to hover, but I did that already and set it to transparent. The color changes upon hover, but the border isn't showing up. Any ideas? Thanks!
Just figured this out. I was calling overflow: hidden on my .main-nav class, and that was hiding my border-bottom.
Make border-bottom disappear on hover.
<a id="toggle" href="#modal0">living in New York,</a>
#toggle {
transition: all .3s ease-out;
position: relative;
}
#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- distance */
border-bottom: 2px solid #000;
}
#toggle::after:hover{
transition: all .3s ease-out;
border-bottom: solid transparent 1px
}
Changed pseudo hover as suggested
#toggle:hover::after{
border-bottom: 1px transparent #999;
transition: all .3s ease-out;
}
You need to add position:relative to #toggle. This will make the positioning of the ::after pseudo-element relative to the element's position.
Edit
Per the update, you need to switch the ::after and the :hover, so #toggle:hover::after. That way it's "the after pseudo-element, of the #toggle when hovered".
You could set the display property of your a-element to inline-block and set the height property to something like 0.9em to move the bottom border closer, eg.
<a id="toggle" href="#modal0" style="display:inline-block;height:0.9em;">living in New York,</a>
How do I remove this ugly border created by a background totally overlapped by a inset shadow? Well, that was the idea anyway.
circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: black;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:inset 0px 0px 0px 0px #ffd300;
transition: all 0.2s ease-out;
}
Code snippet over at Codepen
There is no solution to the actual rendering. (See below the solution for the explanation).
On the contrary, I've played and found a fix for you, which might do the exact thing, by placing an :after pseudo element to mimic the animation exactly as you want it to be.
Click on the "Run code snippet" button below to see if this is exactly what you want.
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:120px;
height: 120px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
font-size: 0;
z-index: -1;
}
.circle:before {
display:block;
content:'';
position:absolute;
background:black;
width:0px;
height:0px;
border-radius:50%;
top:68px;
left:68px;
transition: all 0.2s ease-out;
overflow:hidden;
z-index: 0;
}
.circle:hover:before {
width:100px;
height:100px;
top:18px;
left:18px;
font-size: 48px;
}
.circle:after {
display:block;
position:absolute;
font-size: 48px;
line-height: 90px;
color: black;
transition: color 0.2s ease-out;
content: "J";
z-index: 1;
top:18px;
left:58px;
}
.circle:hover:after {
color: white;
transition: color 0.1s ease-out;
}
<a class="circle" href="#">Click</a>
Explanation to the problem
I've pasted two images of how they are rendered in Webkit (Chrome) and Gecko (Firefox). The shadow is getting pixelated along the edges if it is curved. The same phenomena also happens while drawing a curve.
Image 1, ChromeIt is a 500px x 500px of the same code that you used, just to magnify the effect that we are talking about. You can see those weird ugly border in a better view. Now, try reducing border-radius:50%; to a 20%, 10% or 0%, you will slowly see those ugly marks disappearing. As pixels are square themselves, it renders perfectly in case of a rectangular shape / with straight line edges.
Image 2, FirefoxIn the second image, you can see how Firefox renders the same object (500px x 500px), and adds a secondary unknown border along the outside edge of the circle, which is actually the background:black, going out of the 10px border as well (proof: Change the background to #ffd300 and it will disappear).
To conclude, this aliasing phenomenon is a rendering issue currently for both the major browser engines, though its minimized in actual rendering of the circular object itself, but its more prominent in case of shadows or other things which blurs / blends with other colors. It is not a problem with your code though.
The shape has a background color of black, a 10px outside border of yellow, and a 50px inside border of yellow. This seems to be so that when you hover, it will change the inside of the circle to red.
To get rid of the little sliver completely, you could just change .circle's background to #ffd300 (or whatever).
This breaks the animation, however, so you might want to add background:black to .circle:hover.
You can change your CSS to this:
.circle {
display:block;
text-decoration:none;
border-radius:50%;
width:100px;
height: 100px;
background: #ffd300;
text-align:center;
transition: all 0.8s ease-out;
box-shadow:inset 0px 0px 0px 50px #ffd300;
font-size: 0;
z-index: -1;
border: 10px solid #ffd300;
}
.circle:hover {
box-shadow:none;
background: black;
transition: all 0.2s ease-out;
}
Basically, move the back background to hover state and get rid of the box-shadow. Of course you'll have the border on hover, because it goes with your approach, but at least you won't have the border on default state.
Remember that you can use multiple box-shadows by simply separating them with a comma, but either way, no matter how many you add, you will have this border because the border-radius:50% will add it. For reference, try taking the border-radius definition out and you'll see that border disappear.
In short: the only way to get rid of that border at all times, is to use 2 elements: an outer div with background color #ffd300 and an inner div with background color #000 and the J, otherwise you'll have that border, it's just how CSS works
if you add to the CSS a border-width: 0px;. See http://www.w3schools.com/cssref/pr_border-width.asp
The effect that I'm trying to comprehend is used in the Start Bootstrap Grayscale Template.
This is a bootstrap 3.0 implementation.
As you scroll down, the nav area quickly but smoothly changes its color.
I'd like to bring this awesome feature into yamm's mega menu.
http://geedmo.github.io/yamm/
But before I can do that, I must comprehend the overall idea.
Could someone shed some light on this?
The styles that deal with the nav area is as follows;
.navbar {
margin-bottom: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #000;
}
.navbar-brand {
font-weight: 700;
}
.navbar-brand:focus {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
outline: 0;
background-color: rgba(255,255,255,.2);
}
.navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-toggle:focus,
.navbar-toggle:active {
outline: 0;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
background-color: #000;
}
.navbar-custom.top-nav-collapse {
border-bottom: 1px solid rgba(255,255,255,.3);
}
}
I'm curious to know which sections are responsible for this effect.
Not necessarily what you are looking for, but you could try something like in this fiddle. If you look in the console while scrolling down, you will see the distance from the top as it changes. You can just check the distance and then simply change the class of the menu.
The JS would be something like:
$(window).scroll(function(){
var posTop = $(window).scrollTop() - $('.container').offset().top
console.log('from .container: '+posTop+' | from top of page: '+$(window).scrollTop());
}).trigger('scroll');
Edit: you edited the question and made it more specific, my answer doesn't really apply for what you're asking now.
Later edit: the effect seems to be done from JavaScript, as I suggested. If you look in greyscale.js you can find:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
at the very top of the file. Basically it says that whenever a user scrolls, it checks whether it got 50px lower than the top. If it has, it changes the class of the nav to top-nav-collapse. The smoothing effect comes from CSS, however.
Hi I'm trying to modify a web template which doesn't have different colors for active menu items. I've tried various changes to be able to adjust this. Any ideas? Here is the css:
/** TOP MENU **/
.top_menu .moduletable {
margin:0;
}
.top_menu li {
margin:0px 0 0 5px ;
padding:0;
float:left;
height:100px;
list-style : none;
background : transparent url(../images/top_menu_left.png) 0 0 no-repeat;
opacity:0.6;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* fix IE8 */
filter: apha(opacity = 60); /* fix IE7 */
-webkit-transition : all 0.4s ease-in-out;
-moz-transition : all 0.4s ease-in-out;
-ms-transition : all 0.4s ease-in-out;
-o-transition : all 0.4s ease-in-out;
transition : all 0.4s ease-in-out;
}
.top_menu li:hover {
opacity:1;
-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* fix IE8 */
filter: apha(opacity = 100); /* fix IE7 */
}
.top_menu li a {
display:block;
color: #24221E/*8c8c8c*/;
text-shadow:0 0 3px #fff;
background : transparent url(../images/top_menu_right.png) 100% 0 no-repeat;
text-decoration:none;
text-transform: none;
font-weight:bold;
font-size:90%;
margin-right:-13px;
padding: 60px 22px 4px 20px;
height:40px;
}
Any help would be greatly appreciated
I see that you are using Joomla as a Content Management System and you have to use a class to style an item, for example active, and then you can use CSS to assign a different styling for this item.
.active {
text-decoration: underline;
font-weight: bold;
}
If you want to change the color of the link you need to adress the a tag directly using the following code.
.active a {
color: red;
}
You might find this answer also useful: Joomla - how to hightlight the menu item for active page