I have an image that is a link. I want to show a different image when the user hovers over the link.
Currently I'm using this code:
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).
Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.
Help! How can I do this better?
use a class for the link itself and forget the div
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
Be sure to write the quote marks exactly as they are here, or it will not work.
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
That could be done with <a> only:
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
It can be better if you set the a element in this way
display:block;
and then by css sprites set your over background
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
You could do the following, without needing CSS...
<img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.
You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.
<!---->
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
Related
I'm trying to make a webkit button with linear background along with an icon with the help of ::before element but it does not worked out. Is there any possible way to do the same?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div class="bar2">
<div class="nav-items">BOOKS</div>
<div class="nav-items">SONGS</div>
<div class="nav-items">COOK</div>
<div class="nav-items">GAMES</div>
<div class="nav-items">Recents</div>
</div>
<style>
.bar2{
display: flex;
width: 300px;
overflow-x: overlay;
background: grey;
}
.nav-items{
padding:10px;
}
.bar2::-webkit-scrollbar-track{display: none;}
.bar2::-webkit-scrollbar{background: transparent; height: 30px;}
.bar2::-webkit-scrollbar-button:single-button:horizontal:decrement{
background: url(angle-left.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment{
background: linear-gradient(to left,white,#00000000);
}
.bar2::-webkit-scrollbar-button:single-button:horizontal:increment::before{
position: absolute;
background: url(angle-right.svg);
background-repeat: no-repeat;
background-size: 15px;
}
.bar2::-webkit-scrollbar-thumb{display: none;}
</style>
</body>
</html>
There's a few unusual things here:
You likely don't need most of these very specific browser prefixes. Browser prefixes should be a last resort for edge-cases related to a browser or engine.
There are no buttons in your example, consider using BOOKS tags instead of the <div>s you're using. If you're using Javasript use <button onclick=""> instead. Changing this will get you all the default browser behaviour that is really cumbersome to write yourself (tabindex, keyboard navigation, ...)
But most important for your question:
When using pseudo elements first thing to set is the content. Pseudo elements will not show without it. (MDN documentation)
So for the pseudo to work on .bar2, something like this should do it:
.bar2::before {
content: '';
display: block;
background: red;
min-width: 1rem;
height:1rem;
}
I'm a super beginner at web development and I have a question about trying to "swap" two images.
I have this CSS and markup written but for some reason it does not seem to be working. The second image that's supposed to swap in when hovering over the first image simply lies on top of the first image on the page.
CSS:
.home {
margin: 0;
padding: 0;
background: url('images/onhome.png') no-repeat;
}
.home a, .nav a:link, .nav a:visited {
display: block;
width: 90px;
height: 25px;
}
.home a:hover img {
visibility: hidden;
}
HTML:
<div class="home">
<a href="#">
<img src="style/images/home.png" width="65" height="18" alt="" />
</a>
</div>
I'm not sure what's going wrong, and I'd be very appreciative if someone can help me. If there's another better way to do this, I would be definitely open to that too.
One way to do it is to forget the <img>, and on :hover change the background-image URL.
#home {
background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat;
height: 600px;
width: 600px;
}
#home:hover {
background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg) no-repeat;
}
Working example: http://jsfiddle.net/c9sRa/
If you put your cursor over the wolf it will change to a picture tiger cubs :-)
So I've got a series of clickable images in my page. I've tried to optimise this by generating a single image containing all the images I need and I intend to use sprites to select the one I want. I'm having trouble figuring out the best way to add anchor tags to the sprites though?
So I'm after a clickable HTML element that supports sprites, preferably without using JavaScript. I can do it using JavaScript but I'd prefer to avoid it.
OK, here's my code, what there is:
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
}
.touringNew {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: -10px 0;
}
I've tried
<div class="touringEscorted">
and
and several others. Seems there's no way to use sprites/background images and anchor tags at the same time. Am I right?
Any suggestions?
Ok then :
Should work, but adding display:block; to the CSS :
.touringEscorted {
height:125px;
width: 214px;
background-image: url('/Images/Travel2New/ToursImages/ToursBanners.jpg');
background-position: 0 0;
display:block;
}
Like this?
<a class="sprite sprite1" href="javascript:;">Link Text</a>
sprite {
display: block;
background: url(path/to/image/file.ext);
text-indent: -9999px;
}
sprite1 {
width: WWpx;
height: HHpx;
background-position: -NNpx - MMpx;
}
Doesn't Google consider off screen text as spammy? I came up with a modification. I put the link in another element, in this case a table. I added the background image class in the element and in the link like this:
CSS code:
.sprite{
background: url('images/sprite.png') no-repeat top left;
}
.sprite.termite {
background-position: 0px -499px;
width: 150px; height: 113px;
display: block;
}
HTML code:
<td class="td sprite termite">
</td>
It renders the image in the table perfectly and clicks!
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding
I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously)
width is also 42px. Could someone write something up to make that happen?
image:
http://img826.imageshack.us/img826/6568/homebi.png
It's all about the initial (non-:hover) and final (:hover) values of background-position.
#test {
height: 42px;
width: 42px;
background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: top; /* <-- key step #1 */
}
#test:hover {
background-position: bottom; /* <-- key step #2 */
}
Demo
As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:
Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.
Demo 2
Try this:
<style type="text/css">
.menu {
}
.menu a {
float: left;
display: inline;
width: 42px;
height: 42px;
text-decoration: none;
}
.menu a span {
display: block;
overflow: hidden;
height: 0;
}
.menu .home {
background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
background-position: 0 -42px;
}
</style>
<div class="menu">
<span>Home</span>
</div>
Heres the bare bones for an image rollover.
the css
.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}
The html
<span>Home</span>
The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.
Assuming your image which contains both button states is 84px high this will work fine.