[아임웹 코드] Hover 이미지에 따라 배경 색상이 바뀌는 애니메이션

시연 동영상 보기

<div class="backgroundchange" id="backgroundchange">

  <div class="imgcontainer">

    <img class="hoverimg" id="imweblogo" src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/c3bc0737f03cf.png" onmouseout "restoreBackgroundColor()">

    <img class="hoverimg" id="mappinglogo" src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/f48084ba0695c.png" >

  </div>

</div>

<style>

.backgroundchange{

  width:100%;

  height:800px;

  background-color: white;

  display: flex; 

  justify-content: center;

  align-items: center;

  transition: background-color 0.9s ease; 

}

.imgcontainer{

  display:flex;

  gap:50px;

}

.hoverimg{

width:400px;

 height:400px;

 cursor:pointer;

}

</style>

<script>

  function changeBackgroundColor(color) {

    document.getElementById('backgroundchange').style.backgroundColor = '#' + color;

  }

  function restoreBackgroundColor() {

    document.getElementById('backgroundchange').style.backgroundColor = 'white';

  }

</script>