I have a div that has a background colour and it also contains an <a> with a background image. Currently i've got it to change the background colour of the div and the image when i hover over the image. However when i hover over the visible part of the background colour (most of it is covered by the image) only the background colour changes and not the image.
Here is the code i have.
HTML
<div id="kitchenCol">
<p></p>
</div><!-- End div kitchenCol -->
CSS
#kitchenCol a.rollover
{
display:block;
width:279px;
height:576px;
background:url(../images/kitchenCol.jpg);
}
#kitchenCol a.rollover:hover{background-position:-279px 0;}
#kitchenCol{background:#cccccc;}
#kitchenCol:hover{background:#936768;}
How can i make it so both the image and the background colour changes when i hover over either the image or the background colour.
I am not entirely sure I understand, but try this:
#kitchenCol:hover a.rollover{background-position:-279px 0;}
Instead of #kitchenCol a.rollover:hover{background-position:-279px 0;}.
Mind that won't work on IE6, and possibly IE7 either.
Related
Take a look at the image. First one is hover. How to make such gradient hover effects with the gradient background?
Here's the HTML code- https://github.com/itsumrat/olivia/blob/master/index.html#L127
Here's SCSS code-
https://github.com/itsumrat/olivia/blob/master/assets/src/scss/components/_feature.scss
This is a simple Background Change on Hover:
#yourbutton:hover {
background: linear-gradient: ....;
}
Maybe there's a div in the button with a small white border around. You could Effect the color of that div to have the same result as in the image.
With CSS3, is it possible to fade from a background-color to a background-image?
I know it's possible to fade from color to color or from image to image, but can you also fade from the one to the other?
It's not possible from native view, but you can simulate it: jsFiddle
body {
background-image: url('http://s1.directupload.net/images/140212/gvyaj9ca.png');
}
This picture is a PNG with nothing inside (not even white color) and the same size as:
body:hover {
background-image: url('http://connexo.de/img/logos/CSS3_Logo.png');
}
I don't exactly know what behavior of the background color you want to achieve.
I just revert it to white.
I have an image set as a background like so
.about {
height: 351px;
background-image:url("../images/about.png");
background-position:center;
background-repeat:no-repeat;
}
And I'm trying to user :hover
.about:hover {
background-image:url("../images/hover.png");
}
to display another image over the top. I want the original picture to still be there as the hover image has transparency.
This way replaces the image, is there a way to not replace it but just hover over the original image?
You need a mask, or an element inside your .about element (or positioned absolutely over it). The mask has the hover image as its background, but has visibility:hidden. Then, when the .about element is in hover state, it activates the mask. .about:hover .about-mask {visibility: visible;}. Pro tip: using visibility:hidden instead of display:none allows the browser to load the image, even though its not visible, so you wont have any flickering.
http://jsfiddle.net/nDHbD/
You could place a div above the .about one, then have it display it's image on :hover, that way, both images would show. Even better, you could animate a transition on your new div so it goes smoothly.
I have this menu:
How can I make active white background behind text (ul,li)?
How can I make the background white text on mouse-over? (Contact,Recommended Downloads)
This is image for background:
menuButton:hover
{
background:white;
}
This, hover, should change the color of background when hovering over the div
I'm trying to fill a certain part of the page with a background color. I want the background colour to fill the entire width of the viewport, but have a fixed height. Here's what I've tried:
<div id="theDiv" style="width: 100%; height:200px; background-color:black;">
Blah blah blah, content goes here.
</div>
But no matter what I try, this always give me a small white margin at either side of the div, between the edge of the div and the boundaries of the viewport. How can I make the div fill the entire width of the viewport?
I don't want to change the bg color of the <body> tag as I only need to fill a certain vertical section of the screen.
The only thing I can think of that I haven't tried yet is to create a 1px wide bg image and set it to x-repeat... is there not a more elegant solution than this?
Try to set width of body and html to 100% and paddings and margins to 0.
Also you may want to apply CSS reset rules to the beginning of your style sheet. You can use this CSS reset http://meyerweb.com/eric/tools/css/reset/ or google for another one.
You can use this in your CSS to reset:
* {
margin-right: 0 !important;
}
However if you are using some framework that uses CSS, it might cause an issue.