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.
Related
I've set background-image property in parent element as:
Full screenshot
It works fine.
Inside parent element what has id set as "content" I have a child element
with id "comments".
Full screenshot
Whatever I have tried it doesn't take any effect. I tried to set it to none or even to change to another image. Nothing helps. I want to remove background image for child element or to change it.
Please help, I can't find where I did a foolish thing this time(
If I understand correctly , if you want the child element not to have a background you can add
#comment{
background: rgba(255, 255, 255, 0);
}
and try to remove any other background properties for this element that may be overriding
If you need a different background for the child element then add the follwing
#comment{
background:url(../path/to/image);
background-position:center;
background-size:cover
}
if you want to maintain the image aspect ratio then change cover to contain but this may not fill the whole #comments div in order to respect the ratio
If you need to add a pattern background then use background-repeat:repeat and remove cover and center
I don't think it's possible to do what you want with the current way that your HTML is structured. The #comments div is a child element of the #content div, which has a background set. Even if you give #comments no background, it's still going to show the background of the parent element. Perhaps you could just make the background of #comments white to overlay on top of the #content div? Or remove #comments from the parent element.
Example CSS:
#comments {
background: #FFFFFF;
}
Either move the comments box out of the content element, so content's background does not cover comments, or give the comments element its own background (color or image).
From your screenshots it seems everything is fine. Technically, all DOM elements are transparent by default, and it has no background, it is transparent. So your comments are transparent and have no background. So by setting it to none you are not chanding anything, because its background is none.
As I understand it, CSS can be used to change the content of an element on :hover in a basic way. I am using this code
HTML:
<button><span>3 replies</span></button>
CSS:
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}
but when I hover over the button, it twitches very badly
I want mine to be smooth like the music player at this link
When you hover over one of the buttons under lease, premium, or trackout price, they switch over to the +add text
here is part of my player http://djwckd.com/test
The important thing is to make sure that your layout does not change on hover. The easiest way to achieve this would be to allocate some space in your layout for all of the parts even when not hovering. I'm not sure what sort of layout you are trying to achieve but here is an example:
button { width: 6em }
button:hover span {display:none}
button:before { width: 100px; content: ""; }
button:hover:before {content: "Reply!"}
By giving the :before pseudo-element a size even when it's not hovered the layout shouldn't change when the content changes. You may need to adjust this for the specific layout you want but the general principle is to make sure all of the size-related properties are specified without :hover and then only adjust non-layout properties (that is, properties that don't affect any box sizes) in the :hover state.
As you provided the link is hovering the background images but in your test link you have given background images before to <a> elements, if you want exactly same as link use background-image: url('image1'); to a and background-image: url('image2'); to a:hover.
You can still use positioning the background-images, for this you should have like this.
+--------------+
| | position this background to a
+--------------+
| + Add | position this background to a:hover
+--------------+
Ok! for this make your background 64px width and 32 px height.
then position your background to
a{background-image: url('image') left top no-repeat; background-position: 0% 100%;}
now position your background to
a:hover{background-position: 0% 0%;}
I think I have a solution. The trick was one main thing: setting the width of the text's container. I also used onmouseenter instead of onmouseover for faster text change (my theory that onmouseenter is faster then onmouseover). Here is an example:
var videoplayer = {
text: "<b>Hello World</b>",
author: "(you)"
}
<div onmouseenter="this.innerHTML = videoplayer.text;" onmouseleave="this.innerHTML = '<b>(hover over me)</b>';" style="background-color: red; padding: 10px; width: 110px; text-align: center; color: white;">(hover over me)</div>
Just make sure you set the div's width to the width you need. (If you don't want a background, just change the part that says background-color: red to background-color: transparent). One more thing: you have to use a div or other container with display:block set as its default. I suggest using div. Hope this helps!
I have a div which has 2 images inside of it. Both the images are wrapped in a single a tag.
The first image is a solid image, it has a relative position. The second image is a transparent PNG that sits over the top of the solid image with absolute positioning. Both images are the same size & both images have a lowered opacity.
Basically I want to be able to transition both images to full opacity on hover, but as the transparent PNG covers the solid image completely. Using :hover only triggers the transition for the top image, because I'm technically not hovering over the solid image below.
Is there any way this can be achieved?
Use the :hover pseudo class of the parent a element instead:
div a:hover img {opacity:1;}
This will apply the transition to both child img elements simultaneously.
I have box with nested image and div with text information. I'm doing simple CSS trick with positioning and display parameter changes on hover, so text box is only seen if hover on main box.
Here's my problem, text box has background with opacity, how can I match height of the box with background to its parent when it's show on hover.
Here's live example: http://jsfiddle.net/Mamaduka/jDYu5/16/
If I understand correctly, all you need to do is give texts a height of 100%
.box:hover .texts {
display: block;
height:100%;
}
Worked for me when I edited your fiddle.
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.