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");
}
);
Related
I am new to JS and I'm making a game in HTML5/JS, and I need to set a background image for a div that is nested in another div, without overflow. I put the background-image property on the element, but the background is not appearing.
I haven't been able to find any other examples of this online, or how to fix it. The background-image property is showing up in the browser, and the file paths are correct.
HTML:
<div>
<div id="DivId" class="DivClass">
</div>
</div>
CSS:
.DivClass {
background-color: rgba(20, 20, 20, 0.75);
background-repeat:no-repeat;
background-size:47%;
background-position: center;
background-repeat: no-repeat;
}
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
}
In my opinion you should keep the file in the same folder in which you html file is there and then try it for example
#DivId {
background-image: url(Key-trimmy.png);
}
I hope this helps you
or try
document.body.style.backgroundImage = "url('Key-trimmy.png')";
you can also add image in body tag in html
<body style="background-image: Key-trimmy.png;">
I suggest giving a height value to the div. Background images are not HTML content themselves.
For example:
#DivId {
background-image: url(../InventoryAssets/Key-trimmy.png);
height: 500px;
}
So here's the problem - i need an image to slightly change when the cursor is hovering on it. However, simply writing something like this in CSS styles:
img {src="";} img:hover {src="";}
seems to do nothing. Is there a solution to this problem using only HTML and CSS?
Thank you for your time!
You can use background-image property and change the url on hover
img {
height: 200px;
width: 200px;
background-image: url("https://pixy.org/src/477/4774988.jpg");
background-size: 200px 200px;
;
}
img:hover {
background-image: url("https://pixy.org/src/19/193722.jpg");
}
<img />
I have a animated gif as a background image which is activated when you hover a link.
But once activated it just keeps on playing even though you're not hovering the link and even though it isn't visible.
Are there any ways to restart the gif every time you hover over the link, using css only?
Here is my code so far
<div id="zichtbaar">
Zichtbaar<span></span>
and the CSS
#zichtbaar a span {
display: none;
background-image: url("background.gif");
background-size: contain;
background-position: fixed;
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 100%;
left: 25%;
top: 35px;
z-index:-9999;
#zichtbaar a:hover span {
display:block;
}
I'd create a second image, a still in .png format, and would change the source of the image on :hover so that when the user hovers the image, the source is the animated gif, and when he mouses out, the source is replaced with the still image and that would visually reset the image. Something like this:
#zichtbaar a span {
background-image: url("StillImageOfTheGif.png");
}
#zichtbaar a span :hover {
background-image: url("background.gif");
}
In addition, I'd add an <img> element of the still .png image with a hidden attribute so that the image loads when the page loads and thus avoid a delay when the user triggers the hover.
Edit based on comments and javascript version.
<a id="zichtbaar">Zichtbaar</a>
<img id="DasBild" src="https://jepen84.github.io/github.io/images/static_ice.gif" />
function Start() {
$('#zichtbaar').on({
mouseenter: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/ice_t.gif') },
mouseleave: function () { $('#DasBild').prop('src', 'https://jepen84.github.io/github.io/images/static_ice.gif') }
});
}
$(Start);
You need to use hover
#zichtbaar a span :hover {
background-image: url("background.gif");
<img src="URL_OF_FIRST_IMAGE_SOURCE"
onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'"
onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
I also had the same issues and this solution solved my problem perfectly it also help me tidy my CSS stylesheet cause it also replaces the use of stating a hover effect
Check it out here on fiddle: a link!
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 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.