I have an image on a page and when I hover the image should show a different color. The hover itself works but the original image is on top of the hover image. I have tried setting z-index but does not work correctly.
Here is the CSS:
#login, #logout {
float:left;
padding: 0px 10px;
margin-left:5px;
margin-top:15px;
z-index:1;
}
#login:hover{
background:transparent url('../images/skin/loginhover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
#logout:hover{
background:transparent url('../images/skin/logouthover.png') no-repeat 0px 0px;
float:left;
padding: 0px 10px;
margin-left:15px;
margin-top:15px;
z-index:10;
}
Thanks for any help and advice!
May I suggest you use CSS sprites instead. I believe they are a much more efficient method of achieving what you want.
Rather then 're-inventing the wheel' and writing how to do it here have a look at http://sixrevisions.com/css/css-sprites-site-speed/ or just google 'CSS Sprites'.
They decrease HTTP requests and therefore amount of bandwidth your site uses.
Hope that helps. If not, comment and i'll try and come up with a better option.
Cheers,
Matthew
You're better off having the original image and the hover state on the same element. Right now, the original is an image contained within the link tag, so it is on top.
Do this
Remove the image
Add this CSS to #login
background: url("../images/skin/login.png") top left no-repeat;
display: block;
height: 26px;
width: 80px;
It's better to have both images on the same image (a sprite), and just change the background position on hover. This eliminates flashing as the image loads upon first hovering. See the other answer by Matthew about that.
remove the hover css and change the image to this:
<img height="26" width="80" alt="LOGIN" src="/images/skin/login.png" onmouseover="switchImageIdOver(this,'../images/skin/loginhover.png');" onmouseout="switchImageIdOut(this,'/images/skin/login.png'); />
and add this script to your page:
function switchImageIdOver(elem, imgPath) {
elem.src = imgPath;
}
function switchImageIdOut(elem, imgPath) {
elem.src = imgPath;
}
If you are like me and don't like using sprites:
I came up with a quick and easy way to have the same effect (image fade to color) the only drawback is you need a transparent PNG, but works great with lots of buttons or social media icons.
HTML:
<div class="facebookicon">
<img src="http://example.com/some.png">
</div>
CSS:
.facebookicon img {
background: #fff;
transition: background 400ms ease-out;
}
.facebookicon img:hover {
background: #3CC;
transition: background 400ms ease-in;
}
/* you need to add various browser prefixes to transition */
/* stripped for brevity */
Let me know if you like it.
Related
in site we have like below text as in link1 :
But instead of text - Black & Green , i want to display images as below or css icons as here....
i uploaded Black & Green images to below path :
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
{
width:50px; height:50px; background:#000; border-radius:50%;
}
You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.
label{
width:50px;
height:50px;
border-radius:50%;
background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
background-size:cover;
display:block;
color:transparent;
}
<label>jdjshjkdhd</label>
if you have no influence on html I can give you a hack :))
label {
color: #fff;
width: 0px;
}
label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
here is codepen http://codepen.io/kejt/pen/EZZGeE
This workaround could help you with your requirements. Change the color of background based on for value.
label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}
I want to create horizontal line as shown in below image using css. but unable to create so, i have never seen such line before using css.
Can anyone who are export in css can help me with this?
I know basic like this
Update
Note: Actually, i have to put this in my email template, so i am avoiding images. Just pure css
The only CSS I can think of, is a stretched (transformed) dotted border:
div {
border-bottom: 1px dotted black;
transform: scale(1,10);
}
<div></div>
If it's for an email (see comments section):
use <img src="bars_300x10.png" style="display:block; width:300px; height:10px;">
with an image exactly cut as the expected email design.
Using simply a 3x1 px background base64 .gif:
hr{
border:0;
background: url('data:image/gif;base64,R0lGODlhAwABAIAAAAAAAP///yH5BAAAAAAALAAAAAADAAEAAAICRFIAOw==');
height:10px;
}
<hr>
One posibility that gives you absolute control about the results is a gradient
div {
width: 300px;
height: 40px;
background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px);
background-size: 30px 100%;
}
fiddle
You can adjust the size of the pattern, the width of the black strip, the color ...
I commented but, seems like it would work to use vertical pipes (|) and then to control their size/color/spacing using css font techniques. I'll post some examples. It's not clear to me if using pure css is a requirement for you or not.
span {display:block;}
.a { color:blue; font-size:2em; letter-spacing:.2em; }
.b { color:red; font-size:1em; letter-spacing:2px; }
.c { color:green; font-size:8px; letter-spacing:1px; }
<span class="a">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="b">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="c">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
Another option, if you don't need much variance in the appearance would be to create a single bar "image", then set it as the background-image of a <div/>, and finally apply repeat-x on it.
I have a strange CSS issue, I'm not quite sure how to fix this.
When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.
Any ideas?
Thanks!
Here is some code:
The form:
.tooltip-wrap {
position: fixed;
display:none;
}
.tooltip-wrap .corner {
position:relative;
z-index:100;
margin-left:-5px;
width:0;
height:0;
border:5px solid transparent;
border-bottom-color:#fff;
}
.tooltip-text {
float:left;
margin-left:-50%;
padding:1em 15px;
background:#fff;
color:#333;
}
This is the part that goes up:
.header-navigation.back {
z-index:-1;
position:absolute;
margin-left:0;
margin-top:-6px;
border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}
You need to click on Username and start typing something.
Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.
As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:
.site-header {
background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}
I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.
Change the line-height of the input box - fixes the issue.
HTML to change:
<input type="text" id="text-user" name="user_login" value="Username" style="
line-height: 15px;
">
CSS:
#text-user{
line-height: 15px;
}
The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.
Edit
I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.
Remove the following from .site-header:
padding: 2em 0;
Next, change the row style to look like this:
.row{
margin: 0 auto;
padding: 0 30px;
width: 1171px;
height: 137px;
}
I think the solution is along these lines:
Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.
Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).
I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:
<input type="text" name="user_login" placeholder="Username">
Very cute site!
You could give it a z-index instead of a fixed position, and give it an absolute position.
I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)
I am trying to get rid of the thin border that appears for every image in Chrome & IE9.
I have this CSS:
outline: none;
border: none;
Using jQuery, I also added a border=0 attribute on every image tag. But the border as shown in the image still appears. Any solution?
body {
font: 10px "segoe ui",Verdana,Arial,sans-serif, "Trebuchet MS", "Lucida Grande", Lucida, sans-serif;
}
img, a img {
outline: none;
border: none;
}
.icon {
width: 16px;
height: 16px;
text-indent: -99999px;
overflow: hidden;
background-repeat: no-repeat;
background-position: -48px -144px;
background-image: url(theme/images/ui-icons_0078ae_256x240.png);
margin-right: 2px;
display: inline-block;
position: relative;
top: 3px;
}
<h1>Dashboard <img class="icon" border="0"></h1>
See attached screenshot:
It's a Chrome bug, ignoring the "border:none;" style.
Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.
So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...
#dlbutn {
display:block;
width:0px;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
Voila! Works everywhere and gets rid of the outline/border in Chrome.
Instead of border: none; or border: 0; in your CSS, you should have:
border-style: none;
You could also put this in the image tag like so:
<img src="blah" style="border-style: none;">
Either will work unless the image has no src. The above is for those nasty link borders that show up in some browsers where borders refuse to play nice. The thin border that appears when there is no src is because chrome is showing that in fact no image exists in the space that you defined. If you are having this issue try one of the following:
Use a <div> instead of an <img> element (effectively creating an element with a background image is all you are doing anyway, the <img> tag really isn't being used)
If you want/need an <img> tag use Randy King's solution below
Define an image src
For anyone who wants to get rid of the border when the src is empty or there is no src just use this style:
IMG[src=''], IMG:not([src]) {opacity:0;}
It will hide the IMG tag completely until you add a src
Add attribute border="0" in the img tag
If u didn't define a src or the src attribute is empty in a img tag most browsers will create a border. To fix this use transparent image as src:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAApJREFUeJxjYAAAAAIAAUivpHEAAAAASUVORK5CYII=" border="0">
If you are trying to fix the Chrome Bug on loading images, but you ALSO want your placeholder image to load use (with Lazy Loading images, for example) use can do this trick:
.container { overflow: hidden; height: 200px; width: 200px }
.container img { width: 100%; height: 100% }
.container img[src=''],
.container img:not([src]) {
width: 102%;
height: 102%;
margin: -1%;
}
This will make the border be hidden in the container's overflow and you won't see it.
Turn this:
Into this:
I liked Randy King's solution in that chrome ignores the "border:none" styling, but its a bit complex to understand and it doesn't work in ie6 and older browsers. Taking his example, you can do this:
css:
ins.noborder
{
display:block;
width:102px;
height:86px;
background-image:url(/images/download-button-102x86.png);
background-repeat:no-repeat;
}
html
<ins class="noborder"></ins>
Make sure when you use the ins tag to close it off with a "" or else the formatting will look funky.
In your img src tag, add a border="0", for example, <img src="img.jpg" border="0"> as per explained by #Amareswar above
using border="0" is an affective way, but you will need to add this attribute for each image.
i used the following jQuery to add this attribute for each image as i hate this outlines and borders around images.
$(document).ready(function () {
$('img').each(function () {
$(this).attr("border", "0");
});
});
inline css
<img src="logo.png" style="border-style: none"/>
You can remove the border by setting text-indent to a very big number, but the alt of the image also be gone.
Try this
img:not([src]) {
text-indent: 99999px !important;
}
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;
same as what #aaron-coding and #randy-king had - but just a more generic one to hide image border before they are loaded (i.e. with lazy-load.js or something
(apparently I can't do a code block in my original comment)
.lazy-load-borderFix {
display: block;
width: 1px !important;
height: 1px !important;
outline: none;
padding: 0px;
margin: -4px;
background-image:none !important;
background-repeat:no-repeat;
}
I fix it using padding style:
#picture {
background: url("../images/image.png") no-repeat;
background-size: 100%;
}
.icon {
height: 30px;
width: 30px;
padding: 15px;
}
The border is disappearing, while you are increasing padding value. Find your own value.
it worked for me. It took days which made me crazy.
img.logo
{
display:block;
width:100%;
height:0px;
outline:none;
padding:43px 51px 43px 51px;
margin:0 auto 5px auto;
}
the solution is to set the outline style to none (i.e.) outline:none, it's work with Me
First create an image type PNG transparent with photoshop in mini size.
Then in your class please add:
content:url("url of your blank png");
That happens because you are using an img tag with no src attribute. The solution is puting the image into a div. Something like that:
<style>
div#uno{
display:block;
width: 351px;
height: 500px;
background: url(especificaciones1.png) no-repeat;
}
div#dos{
display:block;
width: 612px;
height: 500px;
background: url(especificaciones2.png) no-repeat;
}
</style>
<div class="especificaciones">
<div id="uno" class="imag1"></div>
<div id="dos" class="imag2"></div>
</div>