I have a code which works fine in Google Chrome but not working in Firefox and IE.
<asp:Image ID="Image1" runat="server" CssClass="image" />
Css Code :
.image{
width:50px;
height:50px;
content:url('Image.png');
}
.image:hover{
width:50px;
height:50px;
content:url('Image_Hover.png');
}
CSS:
.my-img{
width:100px;
height:100px;
background-image: url('Image.png');
}
.my-img:hover {
background-image: url('Image_Hover.png');
}
HTML:
<div class="my-img"></div>
Try this.
Different people here on SO were addressing the same issue. One solution was changing content (...) to background-image. In your case it would be: background-image: url('Image.png'); (or with the hover picture)
Check this post for more detail about that.
Stuart Kershaw gave an explanation for that behavior in one of the comments:
I don't know why it works in Chrome, but the explanation for this is that you can't use the content attribute with the :hover selector. content is meant for :before/:after pseudo elements. –
Edit: Full example of your code, changed according to the information from the linked post:
.image {
height: 50px;
width: 50px;
display: block;
background-image: url('Image.png');
}
.image:hover {
background-image: url('Image_Hover.png');
}
Edit 2: If both images are of the same size, and you are decreasing their size with CSS every time to 50x50, you could just scale the image size to 50x50 and use the smaller images, so that you don't have to do it every time with CSS. I prefer using GIMP for that, but I bet there are many free online tools, which resize your image to the desired size.
There you haven't specify any floating position for the image. try float:left it will work
Related
I'm building a portfolio site for a friend. One of the features includes an image change on hover.
I am trying to achieve this by:
Creating a div with background image
Layering another image over the top of it.
#b1 {
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
#b1.img {
opacity:1;
position:absolute;
left:0;
}
#b1 img:hover {
opacity:0;
}
<div id="b1">
<img src="http://s29.postimg.org/v7eh0qmxz/SHOT_04_024_V7.jpg">
</div>
However, I cannot get the background image to appear and have tried numerous steps to troubleshoot where I'm going wrong.
The JSFiddle with my code appears to be working, but I cannot reproduce it successfully on my localhost.
You need to set CSS rules for width and height of your div that contains background image.
Example:
#b1 {
width:500px; //set your own value
height:500px; //set your own value
position:relative;
background-image: url('http://s10.postimg.org/d03f8a015/SHOT_09_060_V2.jpg');
}
I think it has something to do with the #b1.img selector. When I change that to #b1 img as I think it should be, I don't get the background image repeating across the page and I'm able to reproduce the issue of not seeing it on hover. Then I add height: 480px; width: 359px; to the #b1 tag and it works. Does that change fix it for you?
If not, try using this method instead of changing the opacity: https://stackoverflow.com/a/18813323/4285369
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
I'm finding it tricky to resize images to make them responsive.
I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.
I've successfully added a wrapper class to every image on a website and can re-size the images quite well.
My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.
My code currently converts:
<img src="[src]" />
into:
<div class="erb-image-wrapper">
<img src="[src]" />
</div>
Where I use the following CSS:
.erb-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Worked for me.
Thanks for MrMisterMan for his assistance.
Use max-width on the images too. Change:
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
to...
.erb-image-wrapper img{
max-width:100% !important;
max-height:100% !important;
display:block;
}
check the images first with php if it is small then the standerd size for logo
provide it any other css class and dont change its size
i think you have to take up scripting in between
um responsive is simple
first off create a class named cell give it the property of display:table-cell
then # max-width:700px do {display:block; width:100%; clear:both}
and that's it no absolute divs ever; divs needs to be 100% then max-width: - desired width - for inner framming. A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things.
PS : reset.css style sheets are what makes css blinds there was a logical reason why they gave default styles in the first place.
the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.
background-image : url('YOUR URL');
background-size : cover
Use max-width:100%;, height: auto; and display:block; as follow:
image {
max-width:100%;
height: auto;
display:block;
}
I have a div that i want to apply two backgrounds to it. Basically I have one small picture that will be repeated all over the div, and another big one (no repeats).
I tried to make two divs of the same size layed one upon the other and here is the CSS code it works but I want to do it in a more fashionable way.
.science_wrap{
background-image: url(../bg/graph-paper-background.png);
width:100%;
height: 694px;
margin: 0 auto;
}
.science {
background-image: url(../bg/prospectus-science-line.png);
width:100%;
height: 694px;
margin: 0 auto;
}
Also, i have another div which will have one strip on the top (i have a bg image for it) and I want to put upon it another picture, any tips or tricks to do this?
css3 has provision for multiple backgrounds:
http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering
However, older browsers do not support css3. In particular, IE8 and below do not support it - IE9 does.
You can use css3pie to force support for css3 in older versions of IE, but it can be a little slow, and has some bugs.
If you need to support IE6 it is best to continue using your existing method, I think.
EDIT:
The syntax will look something like this:
background-image: url(../bg/graph-paper-background.png), url(../bg/prospectus-science-line.png);
background-repeat: no-repeat, repeat-y;
You can use psuedo elements like :after or :before to do this: http://jsfiddle.net/JUsXx/
Or you can use CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/ (live example: http://jsfiddle.net/JUsXx/1/)
CSS Pseudo's :before and :after will help you here. They are also more compatible than CSS3's multiple backgrounds.
.science_wrap {
background-image: url(../bg/graph-paper-background.png);
width:100%;
height: 694px;
margin: 0 auto;
}
.science_wrap:before {
content:'';
display:block;
background-image: url(../bg/prospectus-science-line.png);
width:100%;
height: 694px;
}
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)