We Keep Coding

How to make when hover an image to change color and arrow of the button to make transparent

I am working on project with VueJS add vutify. I have created the component v-card vutify. Into v-card I have v-img, v-card-action which into it I have set text and button to separate each side.
I am sharing my link on code pene what I have done until now just as example.
[enter link description here][1]
I want to achieve effect when I click hover image to change color and arrow into of the button to make transparent. Any idea?
Exactly as the link I am sharing below.
[enter link description here][2]
[1]: https://codepen.io/venallanaj/pen/PoEbKYx

The link you provided does not work. Please supply a valid example. Also, please clarify your question. What element/s do you want to change color? Do, you want the elements to change color when the mouse is hovered over the element?
To change color of an element when you hover over the element you could grab the element in CSS and then add the ::hover selector to produce the results.
For example, the following would change the behavior of the input element when the mouse is overed over it.
`input {
border-radius: 2px;
border: 1px solid lightgray;
color: rgb(100, 100, 100);
background-color: transparent;
height: 28px;
line-height: 0;
transition: 0.5s;
}
input:hover{
border: 1px solid black;
color: black;
cursor: pointer;
transition: 0.5s;
}`

How can I convert image white background color to transparent

I have a product image with white background color. Image source link comes from client side database. So, I need to convert image in to a transparent background color (from white) with JS or CSS.
Anyone know a better solution for this?
I heard about by adding bkgnd=transparent value to image URL, Is it a possible way?
Searched a lot time in google, but didn't get any proper solution.
See my code:
.container {
width: 100%;
max-width: 600px;
padding: 10px;
background: url(https://picsum.photos/200/300) center center no-repeat;
background-size: cover;
}
img {
width: 100%;
}
<div class="container">
<img src="https://imgd.aeplcdn.com/1056x594/n/suk7osa_1474663.jpg?q=85">
</div>
JSFiddle

You should to use png without white background. You can not change opacity only white background and leave the car untouched

Using Single Image for Hover Effect

I Had read somewhere on a webtutorial that we can use only a single Image for hover effects in css. For Eg. I Need to input only this image in CSS
So, When the Facebook Icon is not hover we see the dull grey icon, but when someone hovers over the icon, the blue icon is displayed and I need to use only one image file in the CSS for this purpose.
How Can we do that. Also, I would like to know what are these kind of images know as ?

They are called sprites
They allow you to use one image for multiple elements, that can look entirely different
Official Documentation
I made a quick example to do what you required here
<div></div>
div {
background: url('http://i45.tinypic.com/2jee9zo.png');
background-position: -10px -15px;
height: 70px;
width: 70px;
}
div:hover {
background-position: -10px 83px;
}

You can use a CSS sprite. This is a useful tool: http://es.spritegen.website-performance.org/
Further reading: http://www.w3schools.com/css/css_image_sprites.asp

edit: Its called a spirte (sorry added this, cause i forgot to awnser your first question how this was named)
You can do this by positioning your background image as in example from my work down below
This is CSS, btw
input#searchSubmit { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover { background-position: 0px -34px; }
As you see, as I hover over the searchSubmit , it will change the background position of the image, pasted on the button, showing instead of the black with red search icon, the red with white search icon.
site is here, so you can see it in action, all my action buttons are made this way btw.
click here for seeing this in action

Javascript/CSS/PHP Hoverbox with various locations on mouseover

I'm trying to get various locations to appear on a image with mouseovers. So basically I have an image and when you hover over a link nearby a hoverbox appears at the location specified in CSS on the image. However I'm trying to get it to happen with multiple links without creating code for each CSS box.
I have something like 50 links and and when I hover over one I want to be able to pull from a db or text file to grab the location where it should create a hover on the image. My original thought was using PHP to help pull in the information from a file, put it into an array and then having the CSS update on the fly. This seems doable if the user just clicks the link as then I can tell CSS what place in the array to look for the location. I am unsure how I could get this to work with mouseovers if at all possible.
The CSS code is very basic at the moment as shown below.
#box {
position: absolute;
top: 100px;
left: 200px;
background-color: #ffffff;}
Let me know if anything doesn't make sense or if I'm just forgetting something.
Thank you!

Ok, so what you're trying to do is called a CSS sprite. Here's what you want (my example is orthogonal to your code, but teaches the principle):
.link {
width: 50px;
heigh: 50px;
float: left;
text-indent: -9000px;
background-color: transparent;
background-image: url(path/to/sprite.png);
background-repeat: no-repeat;
}
.link#one {
background-position: 0px 0px; /* This one is top left on the image. */
}
.link#two {
background-position: 0px 50px; /* This one is 50px from top and 0px from left on the image. */
}
You can see where to go from here (and you don't need to use .link#one. I just used it for example purposes. You could just use #one, or even a class .one.
Practice with this and you'll get how it works soon enough. Here's some sample HTML:
<a id="one" class="link">One</a>
<a id="two" class="link">Two</a>
Just through all that together, and make your image a 100px tall by 50px wide .png file with 50px x 50px for each link.

Highlight a section of an image in JavaScript

I run a small webpage that allows users to click on various links using image maps. I'd like to highlight the section that a user clicks on to give some feedback to the user (they may be clicking on several different parts rapidly).
Is there a way I can invert (or otherwise highlight) a small section of an image JavaScript?

Instead of using image maps, you could try this CSS method:
Use a transparent <div> on top of each "image-map" part (link), and then use the CSS :hover pseudo-class to handle the highlighting.
CSS:
#image {
position: relative;
width: 400px;
height: 100px;
background-image: url(image_map.png);
}
#map-part {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: transparent;
}
#map-part:hover {
background-color: yellow; /* Yellow Highlight On Hover */
opacity: 0.2;
filter: alpha(opacity=20);
}
HTML:
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Note that this will only work for rectangular links.

Take a look at jQuery MapHilight.
I'm not sure it does exactly what you need, but you can achieve that with minor tweaking.

How about overlaying a semi-transparent <DIV> block over the clicked area to highlight it?

There are many way,
In a d fashion way, break down your images into many smaller pieces and using table to combine them. After that, by using javascript to replace thr "src" attribute for the highlight effect.
In another CSS way, use CSS to clip the alt. image on top of the original, and control which area should be visible.
It is better to have a single image for all rather then many small images to speed up and user will get it without delay by network.