Hey! Here’s a hover transition between two colors:

.thing {
  --bg-color: rebeccapurple;
  background-color: var(--bg-color);
  transition: background-color .25s ease-in;
}
.thing:hover {
  --bg-color: aqua;
}

Thank you!

Anyone successfully animated an img element from

position:unset;
display:none;

to

position:absolute;
display:block;

along with different top, right values to get the img to actually move?

Struggling with that myself. position is not included on the MDN list of properties that can be animated, however right, left, top, bottom are listed! sigh

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;

}
in only one direction for ex just upward, so the bottom stay still and transition happen to the top of the element.

#main1 {
      margin-left:12%;
      float:left;
      clear:right;
      width:20%;
      text-align:center;
      }
#main2 {
      margin-left:12%;
      float:left;
      clear:right;
      width:20%;
      text-align:center;
      }

#container {
           height:200px;
           width:200px;
           clear:right;
           float:left;
           margin-left:10%;
           margin-right:10%;
           margin-top:1.5%;
            }
#main:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);

                  }
#main1:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  -ms-transform:all 1s ease-in-out;

                  }
#main2:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  transform:all 1s ease-in-out;

                  }
.circle {
        /*-webkit-border-radius:50%;*/
        border-radius:50%;
        height:150px;
        width:150px;
            }
#content {
      margin-right:10%;
      /*margin-left:10%;*/
      margin-top:1%;
      text-align:left;
         }
#content:hover img {
                  -webkit-transition:all 1s ease-in-out;
                  -webkit-transform:scale(1.4);
                  transition:all 1s ease-in-out;
                  -ms-transform:all 1s ease-in-out;

                  }
#content1 {
      margin-right:10%;
      margin-top:1%;
      margin-left:10%;
      text-align:right;
         }

#content1:hover img {
                -webkit-transition:all 1s linear;
                  -moz-transition: all 2s linear;
                   -webkit-transform:scale(1.4);
                  transition:all 1s linear;
                  -ms-transform:all 1s linear;
                  }
#container1 {
           height:200px;
           width:200px;
           clear:left;
           float:right;
           margin-left:10%;
           margin-right:10%;
           margin-top:1.5%; 

           }

#section1 {
            margin-left:10%
            margin-right:10%;
            }
#clear {
        clear:both;
        }
#header {
    position:fixed;
    width:100%;
    padding:0px;
    background-color:#c0c0c0;
    opacity:.4;
    margin:0;
        }
p {
    font-size:22px;
    }
a {
      text-decoration:none;
      }
footer {
        margin-left:5%;
        margin-right:25%;
        font-size:20px;
        }
table {
      text-transform:uppercase;
      margin-left:20%;
      }


@media (min-width:300px)
    {
    body {
        width:99%;
        }
    }

in this after transition ends it jumps back can i end it slowly???

yes You can Do That
CSS
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
HTML

TEXT