I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?
Here is an example: http://jsfiddle.net/GFec3/40/
CSS Code:
a.rollover {
display: block;
width: 27px;
height: 25px;
text-decoration: none;
background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}
a.rollover:hover {
background-position: -350px 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML
<span class="displace">TEST</span>
This works but just wanted to know is there a special way to handle more then one rollover image?
You don't have to use background images in css. Example:
<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
<IMG class="on" src="...">
<IMG class="off" src="...">
</DIV>
There's lots of ways of doing this. Which to choose is up to you.
Use CSS sprite, with this you will use only one background image, you just have to change background position for different image hover
CSS Sprites: Image Slicing’s Kiss of Death
The method you currently have is the most efficient. Among other things, it "preloads" the rollover image since it's the same one as the non-rollover just a different part of it. It also reduces the number of HTTP requests to the bare minimum (short of the data scheme) and in some cases actually improves filesize (best case is two images using similar colour palettes, one colour table needed instead of two).
Don't change it, it's perfect.
You do have to define a separate CSS for each rollover, however if the images are the same size you can reduce the damage by reusing the :hover definitions.
Related
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
Here is the basic code for the function I want to do:
<style>
.cmaxx_rollover {
height: 279px;
width: 347px;
display: block;
background: url('http://imperialsystems.biz/imp/files/products/prod_cmaxx.png') bottom;
text-indent: -99999px;}
.cmaxx_rollover:hover {
background-position: 0 0;}
</style>
<a class="cmaxx_rollover" href="http://imperialsystems.biz/imp/products/cmaxx-dust-fume-cartridge-collector/"></a>
So now the question, I have a page of about a dozen products that I need this hover to work on. Is there a better way to do it than to create a new class for each product? Or should I just create the CSS and class for each product?
If you only change the shadow behind the grey rectangle, you could set it as background for all the products and insert product images with transparent background as img like this:
<div class="products">
<img src="cmaxx.png" alt="CMAXX">
<img src="productx.png" alt="Product X">
</div>
With simple style:
.products a {
background: url(gray.png) bottom;
width: 279px;
width: 347px;
display: block;
}
.products a:hover, .products a:focus {
background-position: 0 0;
}
And even better you could throw away the image and use CSS gradients and shadows.
If there will be different backgrounds you will have to use separate classes (possibly with partially shared css). You can also make the images to one to save http requests using css sprites technique.
From what it sounds like, you just need to give the same class name to each item and then implement the hover behavior once. That's all it really takes. So give
class="cmaxx_rollover"
to each product and keep your CSS as is and it'll work on all of them.
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 have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");
I've got the following in my .css file creating a little image next to each link on my site:
div.post .text a[href^="http:"]
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
How do I modify this snippet (or add something new) to exclude the link icon next to images that are links themselves?
If you set the background color and have a negative right margin on the image, the image will cover the external link image.
Example:
a[href^="http:"] {
background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;
padding-right: 14px;
white-space: nowrap;
}
a[href^="http:"] img {
margin-right: -14px;
border: medium none;
background-color: red;
}
Google
<br/>
<a href="http://www.google.ca">
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/50px-Commons-logo.svg.png" />
</a>
edit: If you've got a patterned background this isn't going to look great for images that have transparency. Also, your href^= selector won't work on IE7 but you probably knew that already
It might be worth it to add a class to those <a> tags and then add another declaration to remove the background:
div.post .text a.noimage{
background:none;
}
You need a class name on either the a elements you want to include or exclude. If you don't want to do this in your server side code or documents, you could add the classes with javascript as the page is loaded. With the selection logic wrapped up elsewhere, your rule could just be:
a.external_link
{
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
It would be possible with XPath to create a pattern like yours that would also exclude a elements that had img children, however this facility has been repeatedly (2002, 2006, 2007) proposed and rejected for CSS, largely on the grounds it goes against the incremental layout principles.
So, while it is possible to do neat conditional content additions as you have with a contextual selector and a prefix match on the href attribute, CSS is considerably weaker than a general purpose programming language. To do more complex things you need to move the logic up a level and write out simpler instructions for the style engine to handle.
If you have the content of the links as a span, you could do this, otherwise I think you would need to give one scenario a class to differentiate it.
a > span {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
a > img {
/* any specific styling for images wrapped in a link (e.g. polaroid like) */
border: 1px solid #cccccc;
padding: 4px 4px 25px 4px;
}