Fill Element from Center on Hover

Fill background color in div on hover as animation that starts from center point and goes outerwards

You can do this with a pseudo-element and transition the scale.

div {

  width: 200px;

  height: 200px;

  border: 1px solid grey;

  margin: 25px auto;

  position: relative;

  overflow: hidden;

}

div:before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0);

  width: 150%;

  height: 150%;

  background: #f00;

  transition: transform 1s ease;

  border-radius: 50%;

}

div:hover:before {

  transform: translate(-50%, -50%) scale(1);

}

<div></div>

Fill element with slanted background on hover

I believe that you are actually looking for the end state to fill the entire element with background color and not leave the gap. You could also do it with linear-gradient background images and transition their background-size and background-position like in the below snippet.

One disadvantage of using linear-gradient over pseudo-elements or transforms is that the browser support is lower but it doesn't need extra pseudo-elements and so can leave them spare for other use.

.button_sliding_bg {

  color: #31302B;

  background: #FFF;

  padding: 12px 17px;

  margin: 25px;

  font-family: 'OpenSansBold', sans-serif;

  border: 3px solid #31302B;

  font-size: 14px;

  font-weight: bold;

  letter-spacing: 1px;

  text-transform: uppercase;

  border-radius: 2px;

  display: inline-block;

  text-align: center;

  cursor: pointer;

  background-image: linear-gradient(135deg, #31302B 50%, transparent 51%);

  background-size: 100px 100px; /* some initial size to get the slanted appearance */

  background-position: -50px -50px; /* negative positioning to hide it initially */

  background-repeat: no-repeat;

  transition: all ease 0.8s;

}

.button_sliding_bg:hover {

  background-size: 200% 200%; /* 200% because gradient is colored only for 50% */

  background-position: 0px 0px; /* bring it fully into view */

  color: #FFF;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<button class="button_sliding_bg">Buttontext</button>

<button class="button_sliding_bg">Button text lengthy</button>

<button class="button_sliding_bg">Button text <br> with line break</button>

<button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>

Fill li item on hover in CSS

I changed the background-position around and made the red background a bit larger than the blue one, which seems to have the desired effect.

ul {

 list-style-type: none;

}

.hoverTest {

 float: left;

 margin-right: 1px;

}

.hoverTest li {

    width:100px;

    padding: 11px 16px;

    text-align:center;

    float:left;

    background: #ff3232;

    /* Old browsers */

    background: linear-gradient(to right, red 52%, blue 48%);

    background-size: 200% 100%;

    background-position:right bottom;

    margin-left:10px;

    transition:all 0.5s ease;

}

.hoverTest li:hover {

    background-position:left bottom;

}

.hoverTest li a {

    color:white;

}

 <div class="hoverTest">

  <ul>

   <li><a href="#">Test Button</a>

   </li>

  </ul>

 </div>

How to make background scale from center outwards with CSS transition

You could try like this. It puts the hover effect on a parent div so the hit target is always there.

Also, the circle needs to start off at a scale of 0 so it can expand to the full size during the transition.

HTML:

<div class='container'>
  <div class='circle'>
  </div>
  <span>42</span>
</div>

CSS:

div.container {
  position: relative;
  height: 30px;
  width: 30px;
}

div.container > div.circle {    
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  transform: scale(0);
  transition: all 450ms ease 0ms;
}

div.container:hover > div.circle {
  background: rgba(0, 151, 167, .5);
  border-radius: 50%;
  transform: scale(1);
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

div.container span {    
  position: relative;
  padding: 7px;
  line-height: 30px;
}

div.container:hover span {
  color: rgb(255, 255, 255);
}

https://jsfiddle.net/2zkofa0x/18/

CSS round div fill-in on hover

You can use radial-gradient or box-shadow

box-shadow

.circle {

  height: 50px;

  width: 50px;

  margin: 35px;

  border: 3px solid blue;

  background: blue;

  transition: box-shadow .5s, color .5s;

  background-size: 0 0;

  background-position: 50% 50%;

  border-radius: 30px;

  box-shadow: inset 0 0 0 50px white

}

.circle:hover {

  box-shadow: inset 0 0 0 0px white;

  color: blue;

}

<div class="circle">

</div>

How to change fill of an SVG element based on hover of an separate HTML element?

var allClasses = [], theSVG = null;
function changeSvgClasslist(add){
    if( theSVG ){
        allClasses.forEach( oneClass => { theSVG.classList.remove(oneClass); } )
        if(add) theSVG.classList.add(add);
        console.log(theSVG.classList);
    }
}

function btnOver(evt){
    let btnClass = evt.target.getAttribute('data-class');
    changeSvgClasslist(btnClass);
}
function btnOut(evt){
    changeSvgClasslist(null);
}

document.addEventListener('DOMContentLoaded', () => {
    theSVG = document.querySelector('#Layer_1');
    let theButtons = document.querySelectorAll('#svg_trigger_div .w-inline-block');
    console.log("I see %d buttons.", theButtons.length);
    theButtons.forEach( (btn,idx) => {
        let curClass = 'btnHover'+ (idx+1);
        allClasses.push( curClass );
        btn.setAttribute('data-class', curClass);
        btn.addEventListener('mouseenter', btnOver);
        btn.addEventListener('mouseleave', btnOut);
    } )
});

.cls-1{
  fill:none;
  stroke:#231f20;
  stroke-miterlimit:10;
  stroke-width:35px;
  }

.svg_section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 500px;
}

.svg_wrapper {
  overflow: hidden;
  width: 50%;
  height: 100%;
}

.html-embed {
  width: 100%;
  height: 100%;
}

#svg_trigger_div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e4b5b5;
}

.button1 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #973535;
}

.button2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #5aac6c;
}

.button3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #559bbb;
}

.button4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 200px;
  height: 30px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(162, 71, 153, 0.72);
}

.text-block {
  line-height: 14px;
}

.btnHover1 #rec1{ fill: red; }
.btnHover2 #rec2{ fill: red; }
.btnHover3 #rec3{ fill: red; }
.btnHover4 #rec4{ fill: red; }

<div class="svg_section">
    <div class="svg_wrapper">
        <div class="html-embed w-embed"><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1035 1035.92">
            <defs></defs>
            <rect id="rec4" class="cls-1" x="17.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec3" class="cls-1" x="517.5" y="17.5" width="500" height="500"></rect>
            <rect id="rec2" class="cls-1" x="17.5" y="518.42" width="500" height="500"></rect>
            <rect id="rec1" class="cls-1" x="517.5" y="518.42" width="500" height="500"></rect>
        </svg></div>
    </div>
    <div id="svg_trigger_div">
        <a href="#" class="button1 w-inline-block">
            <div class="text-block">Button 1</div>
        </a>
        <a href="#" class="button2 w-inline-block">
            <div class="text-block">Button 2</div>
        </a>
        <a href="#" class="button3 w-inline-block">
            <div class="text-block">Button 3</div>
        </a>
        <a href="#" class="button4 w-inline-block">
            <div class="text-block">Button 4</div>
        </a>
    </div>
</div>

Fill background color left to right CSS

The thing you will need to do here is use a linear gradient as background and animate the background position. In code:

Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the element's width (width:200%, height:100%), then tell it to position the background right.

background: linear-gradient(to left, red 50%, blue 50%) right;
background-size: 200% 100%;

On hover, change the background position to left and with transition:all 2s ease;, the position will change gradually (it's nicer with linear tough)

background-position: left;

http://jsfiddle.net/75Umu/3/

As for the -vendor-prefix'es, see the comments to your question

extra:

If you wish to have a "transition" in the colour, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

Demo:

div {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: red; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, salmon 50%, lightblue 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
}
div:hover {
    background-position: left;
}

<div>Hover me</div>

CSS: Background fills on hover from bottom to top:

You're changing wrong parameter:

a:hover { box-shadow: inset 0 -40px 0 -1px #FFF986;

a {

  box-shadow: inset 0 -3px 0 -1px #FFF986;

  transition: box-shadow .15s ease-in-out;

  color: black;

  line-height: 40px;

}

a:hover {

  box-shadow: inset 0 -40px 0 -1px #FFF986;

}

<a href="#">Hey Mickey!</a>