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 to add an image overlay to clickable button

I'm trying to add a heathered image to hex color buttons for T-Shirts I'm selling. They're plain colors right now, but for some of the shirts, I want them to have an overlay showing the pattern. How can I add an image to specific buttons (since not all shirts are heathered) and set an opacity for that image? Here's my code right now. I found a good example of how I want it to look online for you to see what I mean. You can check it out here: Heathered Color Swatch Overlay Example.
Here's my code I currently have:
$colors: (
'color-Navy' #2D2F3C,
'color-Ash' #EEF0F2,
'color-Black' #060606,
'color-White' #F6F6F6,
'color-Charcoal' #59545A,
);
#each $color in $colors {
$colorName: nth($color, 1);
$bgColor: nth($color, 2);
#ProductSelect-option-#{$colorName} + label {
background-color: $bgColor;
color: $bgColor;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 25px;
margin: 5px;
text-indent: 100%;
white-space: nowrap;
}
#ProductSelect-option-#{$colorName}:checked + label {
border-color: #555;
border-width: 3px;
}
}

If I understand what you're asking, you want an image to overlay the colored background of each button that will convey whether a shirt is heathered.
If I got all of that right I think what you're looking for is the CSS background-image property, but you'll need to choose an image format that supports transparency like .gif or .png
Then open your shirt-shaped image in an image editor and use the eraser tool to scrub the edges or whatever until it looks sufficiently heathered for your liking and then add it to your project and set it as the background-image of each button.
This page may be able to help.

On input focus make background look like modal

On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)

We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle

Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}

A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.

Mobile CSS not appearing as intended

Check this image and screenshot.
When select, hover or click the link then its show blue background on this mobile site, I already added the below code in my CSS.
Below is the working CSS code in desktop browsers but not in mobile, hover and other classes already defined.
Want to remove this default blue background, i not want this blue background other all things working fine
::-moz-selection {
background-color: transparent;
color: #fff;
}
::selection {
background-color: transparent;
color: #fff;
}

I got the solution Just add the below code in your css
html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

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