background transition

by ShaCP

HTML

<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>
<div class="image">

</div>

CSS

body {
  display: grid;
  grid-template-columns: repeat(4, 100px);
}

.image {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-color: black;
    background-position: center;
    background-size: cover;
    transition: 0.5s background linear;
}

body:hover .image {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg);
}