im trying to make a gallery out of boxes of solid color and an icon on top of it, and when you hover over the box, the solid color changes to a image, and the icon remains.
I actually got a decent answer to this on a previous question, but didn't work with keeping the site responsive. So i thought i figured out a way of going around this, but i cant seem to find a way to make the icon stay on the top.
HTML:
<div class="icon">
<img src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" onmouseover="this.src='http://lolhit.com/img/ups/98581662041324299463.jpeg'" onmouseout="this.src='http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif'" />
</div>
CSS:
.icon {
background: url(http://loosewire.org/wp-content/uploads/blue-icon-transparent-background-500px.png) no-repeat center;
display: inline-block;
}
I also made a fiddle, and just to be clear, it's the .icon that i want to be on top at all times, with box having the ability to change to image on hover: http://jsfiddle.net/baardkolstad/2L44J/
The images used are only for presentation purposes, not the actual images that are going to be used.
I think you should take a look at using a z-index here:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Take note that this only works on positioned elements (position:absolute, position:relative, or position:fixed). This is also on the above web page.
Okay, my final solution for this was to put the icon in an img tag and use the two photos as backgrounds in the CSS. In that way, you have the icon centered at all times, while staying on top.
Thanks for all the help on this matter!
Related
This web page uses a vertical menu that shows a neat little arrow pointing from the currently selected menu item to the page. I examined the code in Chrome and found the following.
For the anchor that displays the arrow the markup is
<li class="current">
<a...>
::before
"Welcome"
</a>
The corresponding CSS is
aside li.current a:before
{
content:"";
border-color:transparent transparent transparent #fff;
border-style:solid;
border-width:10px;
width:0;height:0;position:absolute;left:-30px;
}
I have a fair idea of what is going on here but I haven't quite been able to figure out just how it is that the end result is a triangle pointing to the left. Perhaps someone who understands CSS better than I might be able to explain?
you had used border color of top right and bottom transparent and so it will take color of your left main div. Also as you had used a:before so before start of every a tag it will create this kind of structure in which no content is there and with position absolute you can set it as a triangle view...
If you remove transparent from your code and give colors to border you can see that originally its just like simple square box. So, its a CSS tips and tricks to make shapes using CSS.
Now these days I want to believe everything is possible, when I saw the power of CSS - making irregular shapes with block elements, i.e. triangles, chamfered CSS Border Corners — how easy but how enthusiastic! So I tried to dream about something, something that I believe can be possible with some great knowledge of CSS.
div.image{
width: 18px;
height: 18px;
background: url(images/image-sprite.png) -70px 0;
display: inline-block;
}
Suppose I put an "Image Sprite" () with a width and height of 18px. But the image I called is NOT an 18px x 18px box-shaped image, suppose the image is Round or some Irregular shapes. When I put box-shadow to the div, it highlighted like a box, when I put text-shadow, it doesn't work, as the div/anchor element doesn't contain any texts in it.
If I want to put shadow onto the element, not onto the container (like a box-shaped HTML element), as the image shown, shadow to the outline of the background-less image only — then:
How can it be done with CSS? or,
Is that really possible?
NOTE: I know, when I have a background-less image and Photoshop, I can put necessary shadows into almost any element. But I asked the question, if something like this can be possible with raw CSS then it'd be a great achievement for us.
The new CSS filters will allow you to do this but browser support is not super deep.
Codepen Example
<div class="image">
<img src="http://www.equissage.co.uk/wp/wp-content/uploads/2010/08/equissage-red-horse.png" alt="" />
</div>
.image img {
width:400px;
-webkit-filter: drop-shadow(4px 4px grey);
}
The only way to do what you're asking is by recreating the shape with css or using a icon font.
As the element you want to border-shadow is an image these always become square or rectangular.
Ok, if you go here: http://opportunityfinance.net/Test/2013conf/index.html
You will notice 2 layout issues
This image of the 3 logos needs to be below the "Gold" <h4> tag. But for some reason it won't do it. I have assigned the <div> tag a position of relative since there are other divs within it that need to align the images to the bottom, and this does it correctly, however, it now won't go below the <h4>Gold</h4> HTML.
Next Layout issue:
I have been trying like hell to get a footer on the bottom of the page. Sounds simple right? WRONG! But now that I got the div to be at the bottom, it seems to be cutting off the top area divs above it. So, not all of the content is showing. Instead it is being pushed underneath of the footer. How can I fix this? Tried to put a padding on it, but now sure where and/or how? margin-top on the footer doesn't seem to do anything either.
Any help on this is greatly appreciated. I have been struggling like hell to get this simple layout in order. It should be a fluid layout, as I'm resizing text down as the page resizes also, which seems to be perfectly fine, except for these 2 problems :(
EDIT
Here is a pic of what it looks like when applying the container div a 100 pixel height value:
It is giving it too much space between the <h4>Gold</h4> and the 3 images. Atleast this is the case in Opera. Any possible work-arounds for this?
here's a fix for one
.body {
background-color: #FFFFFF;
padding: 2em 2em 52px 0;
}
you have 3 logo's in one div, on that div add a height, for example
element.style {
height: 100px;
position: relative;
width: 100%;
}
Pretty basic stuff really, you should look into clearfix's here http://css-tricks.com/snippets/css/clear-fix/
When you add a float or position:absolute; to a div, in a way it gives up its reserved space so that causes the parent div to think that there isnt anything inside and therefor has no height, clearfix will fix these problems for you, reason i say is becuase the 3 logo's are all either floated or absolute;
this is the result i get
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
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.