Hello I have a picture made in photoshop. It's only one color (symbol of html). It's made from #d66a00 (shade of orange) color. I need to add effect on hover, that picture slowly pass to another color.
For example. I have a picture on site, it is orange. When I go with mouse over the picture, he will change from orange to blue. Is something like this possible with CSS3, or javascript, or I will need to use two pictures and change background in CSS?
EDIT In response to your reply:
Then you have three options.
First option is like you suggested to create two images, put them behind eachother and use css to change the opacity of the front image. This method is the worst for page loading time.
The second option is to change the image in Photoshop in such a way so that the dark orange part is transparent (0% opacity) and the light orange part is transparent white, with about 10% opacity.
In css then, put a background on the image of #d66a00. On hover, change this background to blue.
The last option is to use an svg of the image (like https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg)
and to embed it in the html (see http://www.w3schools.com/svg/svg_inhtml.asp) So you copy the entire svg code inside the html. Then you can manipulate all the parts of the svg using css. You can add classes to svg elements, and using css, change their 'fill' (which is background in svg)
first answer:
If I understand correctly, your picture is an rectangle that is uniformly the color #d66a00?
In that case you can create a div with this color as a background, instead of using an image. And then on hover, change the color.
<style>
.orange-rectangle{
background-color:#d66a00;
width:5em;
height:5em;
transition:background-color 200ms;
}
.orange-rectangle:hover{
background-color:blue;
}
</style>
<div class="orange-rectangle"></div>
The way I handle this is by creating two images and hiding/displaying the images on hover.
The image holder div holds the images you want to replace - and when it is hovered over the image with the class defaultImage disappears and is replaced by the image with class hoverImage.
<style>
.imageHolder .defaultImage {
display:inherit;
}
.imageHolder .hoverImage{
display:none;
}
.imageHolder:hover .defaultImage {
display:inherit;
}
.imageHolder:hover .hoverImage{
display:none;
}
</style>
<div class = 'imageHolder'>
<img src = 'path/to/first/image.jpg' class = 'defaultImage'>
<img src = 'path/to/second/image.jpg' class = 'hoverImage'>
</div>
Related
I am setting up my own website, and before I do that, I am working on understanding what I want to do following along with a W3 Schools tutorial.
When you click open, it brings up the overlay properly, and when you hover over the text in the overlay, the text changes color, but I want to make it so that when you hover over text, the background of the overlay changes to an image. As it stands the overlay color is gray, but when I hover over something say "dogs" I want the background to be replaced by a picture of a dog.
I have tried to use the CSS :hover function but was only able to have it change the background-color of the individual navbar element, not the whole overlay.
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
background-color: red;
}
This only changes the background color of the navbar element.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
Here is the link to the w3 schools tryIt site, to see the rest of the code.
In CSS you can not change the style of a parent element by Hovering a children element.
You will need Javascript.
I was able to figure it out, by using JQuery, and this is the code that ended up working for me.
<script>
$(".about").hover(function(){
$(this).parent().parent().css("background","red");
});
$(".about").mouseleave(function(){
$(this).parent().parent().css("background","blue");
});
</script>
So basicaly what is happening here is that I have a navbar, which has different links in it each with there own class (for example as you can see here "about" is one). And what I have JQuery do is when you hover over a specific element, it changes the background of the parent attribute.
Note I had to do .parent().parent() because of the way I have it setup, it may be possible to do it with just one .parent().
And then what happensis when you hover over the element in the class it will changed the css of the parent attribute, and then when you the mouse exits the element, the background will go back to what it was originally, so in this case blue.
I hope this helps anyone if they ever have a similar question!
I have a lightbulb image, which the glass bulb is pure white (#ffffff) and the cap is gray (#757575). Is there a way to change my image from:
to: (the #ffffff color will become #f3e73c)
using javascript only (or probably, jQuery)?
(sorry, still can't post pictures, all I can give is the links)
here you go: CSS approach:
http://jsfiddle.net/ea77vbLf/
.bulb{
height: 65px;
width: 65px;
background-image: url(http://i.stack.imgur.com/RkEGo.png);
}
.bulb:hover{
background-image: url(http://i.stack.imgur.com/qPrTk.png);
}
CHECK THIS OUT! CSS WITH JAVASCRIPT/JQUERY CHANGES COLOR EVERY 3 SECS!
http://jsfiddle.net/ea77vbLf/1/
Why not make the white part of the image transparent instead of white, then place it in a DIV of the same size, and change the background colour of the div
I would like to be able to hover over an image and only the background itself to turn black (with opacity to control how much). I already have have an effect for the image itself when it's on hover, but I would like to add an effect where the background which is white to turn to a darker color. Being able to manipulate it later on with opacity and transition would be best, but I have not been able to find css3 or jquery code that works for this so far to get me to that point. Any help would be appreciated.
html
<div class="template_design2" style="margin-top:100px; margin-left:5px;"></div>
css
.template_design2 {
background-image:url(img/template_design2.jpg);
width:740px;
height:280px;
background-repeat:no-repeat;
float:left;
}
.template_design2:hover {
background-position:0 -280px;
}
You need to add a class to your <a>s that contain the background images, so you can target them.
You use .template_design:hover, so to target the first one (since it has no class, but you can use its ID to test it works quickly, then assign all <a>s inside .template_design a class so you can target them all at the same time):
.template_design:hover a#zapzonePoster { opacity: 0.5; }
Here's a fiddle showing how it works:
http://jsfiddle.net/v6aNY/
So once you know that's working, you could then assign a class so it would be more like:
.template_design:hover a.thumbnail { opacity: 0.5; }
... which will target all of them, so you only need one rule to govern it, instead of many.
Here's the same fiddle updated with a class of .thumbnail:
http://jsfiddle.net/v6aNY/1/
I want to darken my background. Normally, its as simple as putting an overlay with a lower z-index than the most front element like seen here:
(source: jankoatwarpspeed.com)
What I want to achieve now is to make the elements behind the overlay STILL be clickable, selectable and so on.
In this example, the links should be clickable, and the text above should be selectable, but STILL be this dark.
I guess I cant archive this with pure CSS, what would be your solution?
Thanks
Just disable pointer events on your overlay:
pointer-events: none;
Example:
http://codepen.io/anon/pen/ebcdz
See this fiddle.My technique is to add the same elements to the overlay div and to set the color of text of the href text to the background color of overlay so that it appears invisible.See this fiddle.
http://jsfiddle.net/5Ux5t/1/
CSS for href within overlay div to make it invisible
#overlay a{
color:black;
}
Actually there are links in the overlay too.I just added the above CSS to make them invisible.See this:
http://jsfiddle.net/5Ux5t/
See for yourself. I can't figure out if it's even possible to get rid of that weird colored border. The point of this code is to be able to rotate an image and change the color of it at the same time. The way the code is, the color and angle of the image can easily be coded to be dynamic. This code uses a png image that is white, but has a transparency layer in the shape of the paw print. This way when you edit the background color, it changes the color of the image. It would work great if it were not for the weird border that gets added to the image... notice if you remove the rotate functionality, there is no annoying border.
Including JQuery 1.8.2, here is the HTML/CSS code:
CSS:
.image {
display: inline-block;
margin-left:auto;
margin-right:auto;
background-color: blue;
transform: rotate(30deg);
}
HTML:
<span class="icon"></span>
Adding this: -webkit-backface-visibility:hidden; solved it for me
The paw is created by making its area transparent in the png and setting the background to red and the surrounding area white.
My suggestion, do the opposite. Fill the paw with red in your png and leave the space around it transparent. At least in your fiddle there will no longer be a red line around it as the background color will be set to white.