JQuery function distorts image. How to fix? - javascript

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.

Related

change text color with mix-blend-mode when divs are overlapping

I have a circular div which follows my cursor. When this div overlaps some text on my page, I want the color of the text to change. I know this is possible with mix-blend-mode like in this Fiddle, but I just can't get it to work.
I tried backdrop-filter and different approaches with SVG but none of it will work.
I've seen this effect on so many sites, but I just can't figure it out myself.
Codepen
This is not showing because your text's color and circle's color are same. Change your label's css into the codepen like this. It will be shown.
.label
color: red
font-size: 28px
z-index: 2
mix-blend-mode: difference

Picture color overlay in CSS

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>

Apply a color tint to a specific color in an image using javascript

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

changing position of background image which appears after a hover html/css

EDIT: background-position does change the position of the background image. I realized the actual problem I am facing is something else, which can be seen on this thread:
Background image disappears when changing its background-position?
Okay so I have a set of links (a href's) inside an unordered list, and when the user hovers over them, I want a black background image to show up on top of the link and change the links color to black. I already have the background image which shows up photoshoped. Here is what I did so far
li:hover {
color: white;
background: url(../images/liHover.png);
}
Now, the problem is that the image doesn't show where I want it to show. I want the link to be in the center of the image. The image is like 3 pixels below where I actually want it to be. It is the same for which ever link I hover over, the image is always 3 pixels below where I want it to be. Is there a way to change the position of the image which shows up and a way to move that image a few pixels above where it is normally supposed to be? (even if we cannot do this with CSS, if someone can write a Javascript function which can get this accomplished, that would be great).
The list is just
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
i think this is what you mean:
li:hover {
color: white;
background: url(../images/liHover.png) no-repeat center center;
}
if it doesn't center the way you want, play with the center center values which are x / y (horizontal / vertical). they can be also px,em or % values.

jQuery Drag resize neighbouring DIVs

Please refer to this fiddle first:
http://jsfiddle.net/QhVNr/121/
I am writing a coding which enable user to drag the middle div[white color as in the fiddle.]
What i want originally is when dragging the white portion upward will make the height of green color div decreased while the blue color div's height will increase.
But it ends up like in the example, the draggable white div like lost control and just go upward/downward lightning fast and over the parent wrapper.
You may try to edit the code by comment out this 2 lines in javascript
$('#draggable_0').height(div1H);
$('#draggable_2').height(div3H);
Then the dragging function is acting like normal and will be contained within its parent.
How to solve this please anyone?
To make the dragging and also the the green and blue div acting normal.
Thank you.
The .draggable position is relative
So when you modify the #draggable_0 height, the position of .draggable will be relative to the #draggable_0.
change the css :
.draggable
{
height:20px;
width:130px;
cursor:pointer;
border:1px solid #000000;
background-color:#ffffff;
position:absolute;
}

Categories

Resources