Develop Reference

How to make a smooth background fill from left to right along with input and submit when hovering

Sorry for my poor english.
How to implement this? It is necessary to smoothly appear and disappear when pointing. I tried, but it turns out quite differently. it is necessary that it is not just filled in with a rectangle, but that it is rounded. also, so that when passing "input" and "submit", he also painted them over. everything is as in the picture
(
.feedback {
display:flex;
padding: 40px;
background: linear-gradient(to right,
#000 50%, #FA5C45 50%);
background-size: 200% 100%;
background-position: 100%;
transition:all 2s ease;
}
.title__block {
width: 50%;
}
form {
display: flex;
flex-direction: column;
}
.input {
margin-bottom: 20px;
}
.feedback:hover {
background-position: 0 100%;
}
h3 {
color: #fff;
}
<div class="feedback">
<div class="title__block">
<h3> Оставьте заявку</h3>
</div>
<div class="form__block">
<form>
<input type="name" class="input">
<input type="phone" class="input">
<input type="submit" class="submit">
</form>
</div>
</div>

it took me a while but i hope it will work for you :)
I changed it from linear-gradient to radial-gradient, the reason is because you can't get rounded shape with a linear-gradient.
Then I resized it a little bit so it looks almost the same as you showed us the screenshots, changed the background size to go off the screen , i tried to use % but it didn't work so instead of that i used viewport for both width and height.After that i changed the position so it goes out from the viewport range and on your :hover function just changed back the position so it fills up your div.
If you find the animation too slow, its because i put too big numbers into the viewport sizes, therefore if you want it to be faster, just change the transition value in your .feedback div to a smaller value.
https://codepen.io/qnecro/pen/PomdVLr
.feedback {
display:flex;
padding: 40px;
background: radial-gradient(ellipse,
#000 40%, #FA5C45 40%);
background-size: 500vw 300vh;
background-position: -392vw 50%;
transition:all 2s ease;
}
.title__block {
width: 50%;
}
form {
display: flex;
flex-direction: column;
}
.input {
margin-bottom: 20px;
}
.feedback:hover {
background-position: -288vw 50%;
}
h3 {
color: #fff;
}
But be AWARE!
I made an Ellipse, so now it looks like this when you look at it from far away and you don't trigger your :hover function:
So when your :hover function triggers, you move the black Ellipse to the right side as the blue arrow shows you in your :hover function, you end up with this:
But if you change your viewport value to too big, it can end up looking like this:
Your div on the left side will be no longer covered by the black ellipse.

For you issue better away use pseudo-element like extra layer. And for input tags to set background: transparent.
.feedback {
display: flex;
padding: 40px;
background-color: #fa5c45;
position: relative;
overflow: hidden;
}
.feedback::after {
content: '';
position: absolute;
height: 300px;
width: calc(100% + 300px);
top: 50%;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
border-radius: 0 300px 300px 0 / 0 250px 250px 0;
transform: translate(-110%, -50%);
transition: all 2s ease;
z-index: 1;
}
.feedback:hover::after {
transform: translate(0%, -50%);
}
.title__block {
width: 50%;
position: relative;
z-index: 5;
}
form {
display: flex;
flex-direction: column;
position: relative;
z-index: 5;
}
.input {
margin-bottom: 20px;
background: transparent;
border: none;
}
.input[type='name'],
.input[type='phone'] {
width: 100%;
padding: 8px 0;
color: white;
border-bottom: 1px solid white;
}
::placeholder {
color: white;
}
.feedback:hover {
background-position: 0 100%;
}
h3 {
color: #fff;
}
<div class="feedback">
<div class="title__block">
<h3>Оставьте заявку</h3>
</div>
<div class="form__block">
<form>
<input type="name" class="input" placeholder="Имя" />
<input type="phone" class="input" placeholder="Телефон" />
<input type="submit" class="submit" />
</form>
</div>
</div>

How to Make Pop-Up Title Card on Hover?

So for my website, I have a portfolio page and I want to design a simple image thumbnail for my Google doc or Word documents to link essays and stuff. The same for PDFs, Slides, etc.
I want the logo or letter to be shown and when you hover on it, I want a title card to "pop" up and like bounce up a bit and then when you hover off, I want the card to slide down and disappear.
In theory, this is what I want it to look like:
Whether it just slides up and then slides down or shoots up, bounces like it's hitting the bottom of the square, then falls down, doesn't matter - I'm just wondering how to do this.

There are a ton of different ways to do this.
Here is a CSS only way.
Basically, you would create a different class name for each title card that you want to have a hover pop-up caption. I use a pseudo selector for the content in the hover pop up.
Hope this helps!
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
background: #e8e8e8;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%, rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hello from the other side!";
}
.title-card.caption-b::before {
content: "It's tricky!";
}
.title-card.caption-c::before {
content: "Don't call it a comeback!";
}
.title-card.logo-a {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a);
}
.title-card.logo-b {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4);
}
.title-card.logo-c {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb);
}
.title-card.logo-d {
background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/su/su-icon.png?v=0ad5b7a83e49);
}
<div class="title-card logo-a caption-a">I have a caption, hover over me!</div>
<div class="title-card logo-b caption-b">I have a caption, hover over me!</div>
<div class="title-card logo-c caption-c">I have a caption, hover over me!</div>
<div class="title-card logo-d">I don't have a hover caption :(</div>

Unable to show color fill animation in div when the page loads

$("#whoami").waypoint(function() {
console.log('you have scrolled to the h1!');
});
.d8{
border: 1px solid black;
width: 100%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background: linear-gradient(to right, #e74c3c 85%, #FFF 50%);
}
<div class="d8"></div>
Now I have been trying to fill the color in the div when the waypoint reaches the particular section having some nice animation effect for the user and I am not able to achieve it though,
Have tried transition effect and keyframe none seems to work, any help would be very much appreciated.

In you case you can animate background-size instead of background-image (that you cannot animate) and make the linear-gradient to be one color as the white part will be the part without background:
.d8 {
border: 1px solid black;
width: 80%;
height: 2.5rem;
margin-left: 5rem;
border-radius: 1rem;
background-image: linear-gradient(to right, #e74c3c, #e74c3c);
background-size: 80% 100%;
background-repeat: no-repeat;
transition: 0.5s;
}
.d8:hover {
background-size: 100% 100%;
}
<div class="d8"></div>

How to put color on the image without affecting the transparent area?

I am wondering how to put color on the image without affecting the transparent area. I must say that I want to apply a gradient with a hard transition.
I tried to implement it through the svg, but there is a problem in the animation of the gradient.
I tried to make it through the mask, but it works correctly only in webkit.
There was an option to make a div with a gradient, and on top of it lay a picture with a background (I've seen on other sites), but my background does not allow to do it is not noticeable to the eye.
Default picture:
It should be:
It should be possible to animate:
Thanks for answers! :)

Not perfect, but can be a beginning:
.base {
width: 300px;
height: 600px;
overflow: hidden;
position: relative;
background-color: lightgreen;
}
.test {
width: 300px;
height: 200px;
background-image: url(https://i.stack.imgur.com/sklUO.png);
background-size: 100%;
position: absolute;
animation: move 12s infinite linear;
}
.t1 {
top: 0px;
background-position: 0px 0px;
filter: sepia(100%) saturate(200) hue-rotate(40deg);
}
.t2 {
top: 200px;
background-position: 0px -200px;
filter: sepia(100%) saturate(200) hue-rotate(130deg);
animation-delay: -3s;
}
.t3 {
top: 400px;
background-position: 0px -400px;
filter: sepia(100%) saturate(200) hue-rotate(220deg);
animation-delay: -6s;
}
.t4 {
top: 600px;
background-position: 0px -600px;
filter: sepia(100%) saturate(200) hue-rotate(310deg);
animation-delay: -9s;
}
#keyframes move {
from {
top: -200px;
background-position: 0px 200px;
}
to {
top: 600px;
background-position: 0px -600px;
}
}
body {
}
<div class="base">
<div class="test t1"></div>
<div class="test t2"></div>
<div class="test t3"></div>
<div class="test t4"></div>
</div>

Just a thought, maybe you should create a png where the shape of the image is cut out. so your image will be at the bottom, then in divs you can have your coloured divs with little bit of opacity & as a topmost later, you keep the new png ( the inverted version ) as the top most layer. This might work.
Let me know.
Thanks!

jQuery donut plugin: Arrow doesn't show on print

I was trying to use this jQuery plugin to show a percentaje donut on a page:
http://larentis.eu/donuts/
When I add the code to the page, it works perfectly and you can see everything is ok:
But when I go to the print preview I don't see the arrow pointing the percentage value on the donut:
After a little research I saw the css used for this plugin and the arrow has the class .donut-arrow and it has the following styles associated:
/* line 38, ../sass/donuts.scss */
.donut .donut-arrow {
height: 1em;
width: .1em;
margin-left: -.05em;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
/* line 49, ../sass/donuts.scss */
.donut .donut-arrow, .donut .donut-arrow:before {
position: absolute;
display: inline-block;
background: #333;
left: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 57, ../sass/donuts.scss */
.donut .donut-arrow:before {
content: '';
height: .2em;
width: .2em;
bottom: -.1em;
margin-left: -.1em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-borderradius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
What css styling should I add to see this arrow while printing the page?
Any Idea? Thank You very much!
Update: I added the jsfiddle here: http://jsfiddle.net/KRcMg/

The arrow itself is a div with a background-color:
.donut .donut-arrow, .donut .donut-arrow:before {
background: #333;
}
Backgrounds won't display when printing. As such, your best bet will probably be to try and recreate the arrow with the same markup, using borders instead of a background colour.
Something like:
.donut-arrow {
width: 0;
border: .05em solid #000;
}
You'll want to size the borders using em's, as that will let you maintain the different sizes of the arrows according to the parent class.