I would like the top half of this image to display by default, and then use some CSS to make the image shift upward so that the bottom half shows when the mouse hovers over it. Here is the code and what I've tried, but it is not working. Can anyone help me make this code work?
HTML:
<div id="next">
<img src="images/next3.png" alt="next page">
</div>
CSS:
#next a:hover{background: url('images/next3.png') 0 -45px;}
EDIT:
HTML:
<div id="next">
</div>
CSS:
#next {
height:40px;
width:160px;
background-image:url('images/next3.png');
}
#next:hover{background-position: 100% 100%;}
I think you need to use background-position attribute to achieve this.
CSS
div
{
height:40px;
width:160px;
background-image:url('http://i.stack.imgur.com/OOGtn.png');
}
div:hover
{
background-position:100% 100%;
}
JS Fiddle Example
You can also look into CSS Sprites.
You need to use it as a background in the first place. The <img> is covering the background.
Get rid of the image HTML and just use some CSS like this
a {
display: inline-block;
height: 40px;
width: 160px;
background: transparent url(img.jpg) 0 0 no-repeat;
}
a:hover {
background-position: 0 40px;
}
In this case you will need to remove your <img> tag and consistently use the CSS background attribute for both cases. Also define your height and width width of your a tag with CSS too.
Related
I would like to hover over div id-"RollOver1" and be able to change the background to a different image from the main one. Only pasted the HTML for the rollover div cant use jscript so is there a way in HTML or ....?
<div id="RollOver1" style="position:absolute;overflow:hidden;left:152px;top:397px;width:183px;height:183px;z-index:4">
<a href="./car.html">
<img class="hover" alt="" src="images/Enter_02.jpg" style="left: 0px; top: 0px; width: 183px; height: 183px; display: block;">
<span style="display: none;"><img alt="" src="images/index_01.jpg" style="left:0px;top:0px;width:183px;height:183px"></span>
</a>
</div>
You can do this with the following code:
#RollOver1 {
background:url(INITIAL_BACKGROUND);//here use the url of the background you want when is NOT on hover
}
#RollOver1:hover {
background:url(BACKGROUND_ON_HOVER);//here use the url of the bg you want when is on hover
}
You can use :hover pseudo class:
#RollOver1 {
background: url('img1.png');
}
#RollOver1:hover {
background: url('img2.png');
}
But you will usually see "glich" between changes of images, because second image will take some time to be loaded.
To avoid that, use image sprite. Put both images (normal and hover) to single image and than use css background-position
#RollOver1 {
background: url('sprite.png') no-repeat 0 0;
}
#RollOver1:hover {
background-position: -80px -90px;
}
It will be more efficient way to load small images (like buttons, icons and so on).
Check this link
Using JQuery you can try
$(document).on("mouseover", "#RollOver1", function(e) {
$(this).css("background", "url(sampleImage.png) no-repeat");
}
});
use the css pseudo class :hover
You can use below styles
.RollOver1:hover {
background-image: url('paper.gif');
}
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
i have two images of text. one with regular text and the other with the same text but with glow effect.
the thing is i want the glow image to replace the regular one while hover.
but instead the glow image appears in addition to the regular one.
please help!!
thanx in advance
here is the code... the background-image attribute is in a comment block because the regular text image is defined as the img src int the html file
#groundPlainLink
{
height:56px;
width: 170px;
margin-left:476px;
float:left;
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/
}
#groundPlainLink:hover
{
background-image: url("../images/txt_menu_ground_plane_glow_pc.png");
}
It appears in addition, because the IMG element renders above the background image. Why not just use CSS, and skip the IMG element?
You have to hide the image on hover.
#groundPlainLink img:hover { opacity:0; }
However, as mentioned above, it'd be easier and simpler to remove the img and rely on background images for this.
EDIT: Or, style the element instead of the div element, then put text inside the link with a font-size:0. That'd do what you're looking for and still be good for screen readers/accessibility/SEO.
a fiddle
https://jsfiddle.net/Hastig/jd23mcnx/
html
<a class="image-link">
<img class="image-default" src="http://i.imgur.com/c0lfxLU.png">
<img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">
</a>
css
.image-link {
display: block;
width: 500px;
margin: 20px auto 0px auto;
}
.image-link img {
width: 500px; height: 300px;
}
.image-hover {
display: none;
}
.image-link:hover .image-default {
displaY: none;
}
.image-link:hover .image-hover {
display: block;
}
I am using CSS for hover and it works, but the hover image allow the background image (pic_normal) to display like transparent behind the image(pic_hover).
How to display only the hover image when mouse over on it?
HTML
<img id="first" src="images/clients/pic_normal.png" />
CSS
#first img:hover {
background-image: url("/images/clients/pic_hover.png");
background-repeat: no-repeat;
}
Your CSS works just fine as intended - it changes the background of your img element. Think about the pic_normal.png as the content of your element (e.gg. some text). When you changing the background the content doesn't change.
Try this instead - http://jsfiddle.net/WvKye/
<div id="first"></div>
#first {
background: url("images/clients/pic_normal.png") no-repeat;
height: 300px;
width: 300px;
}
#first:hover {
background: url("images/clients/pic_hover.png") no-repeat;
}
Use this:
<img onMouseOver="this.src='images/clients/pic_normal.png'"
onMouseOut="this.src='images/clients/pic_normal.png'"
src="images/clients/pic_normal.png"/>
I think u need some javascript for that
Using Jquery u can do like this
$("#first").hover(function()
{
$(this).attr("src","/images/clients/pic_hover.png");
},function()
{
$(this).attr("src","/images/clients/pic_normal.png");
}
);
I have this code:
HTML:
<img class="d" src="i3.jpg" alt=""/><img class="d" src="i4.jpg" alt=""/>
CSS:
img.d{margin-top:10px;margin-left:20px;}
however, I want to put the i3.jpg in the CSS, not the html to further separate the structure from the presentation...how do I go about doing this.
Thanks.
Found this
link here
You can set the image as a background image of an element.
HTML:
<div class="d"></div>
CSS:
div.d{width:20px; height:20px; margin-top:10px; margin-left:20px; background:url('i3.jpg') 0 0 no-repeat;}
One option would be to use e.g. a div-element and attach a background image to it using CSS.
An img tag should be used when the image is content, like a cat wearing a fun costume. Moving image references to CSS can make sense when they're stylistic/UI and not content.
That said, the answer is to remove your img tags and replace them with divs. You can then set a background-image for the div, and just give it some basic properties to size/position it.
HTML:
<div class="d"></div>
CSS:
div.d {
display: block;
background-image: url('i3.jpg');
width: 100px; /* or whatever it should be */
height: 100px; /* or whatever it should be */
margin-top: 10px;
margin-left: 20px;
}