Code: <HTML>
<HEAD>
<TITLE> Hover pictures </TITLE>
<STYLE type=’text/css’>
#logo1 {
position: relative;
left: 400px;
opacity: 1;
-webkit-transition: left 2s ease, opacity 8s ease;
-moz-transition: left 2s ease, opacity 8s ease;
-o-transition: left 2s ease, opacity 8s ease;
transition: left 2s ease, opacity 8s ease;
}
#logo1:hover{
position: relative;
opacity: 0;
}
#logo2 {
position: relative;
left: 400px;
opacity: 1;
-webkit-transition: left 2s ease, opacity 8s ease;
-moz-transition: left 2s ease, opacity 8s ease;
-o-transition: left 2s ease, opacity 8s ease;
transition: left 2s ease, opacity 8s ease;
}
#logo2:hover{
position: relative;
opacity: 0;
}
</STYLE>
</HEAD>
<BODY>
<IMG src=’images/Apple.png’ id=’logo1′>
<BR><BR>
<IMG src=’images/lefts.png’ onclick=”document.getElementById(‘logo1′).style.left=’0′;”>
<IMG src=’images/rights.png’ onclick=”document.getElementById(‘logo1′).style.left=’1000′;”>
<BR><BR><IMG src=’images/Adobe.png’ id=’logo2′>
<BR><BR>
<IMG src=’images/lefts.png’ onclick=”document.getElementById(‘logo2′).style.left=’0′;”>
<IMG src=’images/rights.png’ onclick=”document.getElementById(‘logo2′).style.left=’1000’;”>
</BODY>
</HTML>
Result: A16-27lbofg