버튼 이미지를 다른 버튼 이미지로 바꿈

Question

웹 사이트에서 약간의 CSS 애니메이션을 추가하고 싶습니다. 현재 탐색 모음 버튼처럼 간단한 롤오버 이미지가 있습니다. 페이딩 효과를 추가하고 싶습니다.하지만 지금은 그렇습니다.하지만 더 예뻐요. 웹 사이트와 탐색 모음이므로 동일한 탐색 모음을 사용하고 싶지만 페이드 전환 효과가 있습니다. 나는 많은 것들을 시도했지만, 아무것도 나를 위해 일한, 페이드를 얻을 수 있지만 그것은 다른 이미지로 바뀌지 않습니다. 도와 주셔서 감사합니다!

HTML :

<div id="buttons"><a href="../index.html" onmouseout="MM_swapImgRestore()"     onmouseover="MM_swapImage('Home','','../gallery/images/buttons2_01.png',1)"><img  src="../gallery/images/buttons_01.png" width="100" height="42" id="Home" /></a><a href="../Resume.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Resume','','../gallery/images/buttons2_02.png',1)"><img src="../gallery/images/buttons_02.png" width="110" height="42" id="Resume" /></a><a href="../Portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portfolio','','../gallery/images/buttons2_03.png',1)"><img src="../gallery/images/buttons_03.png" width="108" height="42" id="Portfolio" /></a><a href="../Contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../gallery/images/buttons2_04.png',1)"><img src="../gallery/images/buttons_04.png" width="110" height="42" id="Contact" /></a></div> 

CSS : 예를 들어

#buttons { 
width:428px; 
height:42px; 
margin-top:48px; 
float:right; 
margin-right:35px;} 

Answer 1

, 불투명도와 그것을 시도! 당신이 마음에 들지 않으면

#buttons { 
width:428px; 
height:42px; 
margin-top:48px; 
float:right; 
margin-right:35px; 
opacity:1;   /*Here the full opacity*/ 
transition: opacity 1s; 

#buttons:hover {  /*Hover means when you go over the element with the mouse*/ 
    opacity: 0.6;} 

그냥 말해 내가 당신에게 뭔가를 보여! 최고,