I'm using jQuery and I've tried this:
$("#ilussion").click(function(){
$("#ilussion").animate({direction:'left'},500);
});
.headerEnd{
padding: 0px;
margin: 0px;
width: 100%;
background-color:#000000;
height:100px;
text-align: center;
}
#fotoEndi{
margin-left: 100px;
}
@font-face{
font-family: "TituloEndi";
src: url("GameofBrush.ttf");
}
a:link{
text-decoration:none;
}
a:visited{
color: #000000;
}
#nombreEndi{
text-align: center;
margin:0 auto;
position: relative;
top: 50%;
color: #8B0000;
font-family: "TituloEndi";
font-size:40px;
}
.header{
height:50px; width:100%;
text-align:center;
}
.menu{
height: 37px;
width:100%;
background-color: #B22222;
color:#333;
text-align:center;
box-shadow:0px 4px 3px rgba(0,0,0,0)
}
.wrapper{ height:2000px;
width:100%;
padding-top:20px
}
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
width:100%;
box-shadow: 2px 2px 5px #999;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
font-size: 25px;
width: 100%;
}
body{
background-color: #DCDCDC;
margin: 0;
}
#menu li{
background: #DCDCDC;
display: inline-block;
list-style: none;
background-color:#B22222;
}
.listaArriba{
color: #000000;
width: 150px;
}
#titulua{
background-color:#000;
text-align:center;
margin-left: 300px;
margin-top: 7px;
}
.lyrics{
background-color: white;
height: 650px;
width: 90%;
margin: 0 auto;
margin-bottom: 10px;
top: calc(50% - 225px);
left: calc(50% - 380px);
display-inline: block;
}
#footer{
margin-top:0px;
height: 40px;
background-color:#B22222;
}
#soundcloud{
margin-right:40px;
margin-top: 3px;
}
.navigationFoot{
text-align: right;
}
a{
color:black;
text-decoration:none;
}
#o{
margin-left: 250px;
float: top;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #B22222;
}
#singles,#albums{
text-align: center;
}
#div_negro{
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.8);
z-index: 9000;
display: none;
}
#float{
width: 700px;
height: 0px;
background-color: white;
margin: 0 auto;
position:fixed;
top: calc(50% - 300px);
left: calc(50% - 330px);
z-index: 9000;
text-align: center;
}
h3{
font-size: 42px;
}
#divSK{
float: left;
margin-left: 70px;
margin-top: 40px;
}
#divWA{
float: right;
margin-right: 70px;
margin-top: 40px;
}
#ilussion{
margin-top: 40px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="headerEnd">
<div class = "cabecera">
<ul id = "lista1">
<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></a>
</ul>
</div>
</header>
<header class = "header">
<div class="menu" id="menu">
<nav class="top-menu">
<ul class = "navigation">
<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
</ul>
</nav>
</div>
</header>
<div id="float" style="overflow:scroll">
</div>
<div class="lyrics">
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
<li class="active" id="albumPill"><a href="#">Albums</a></li>
<li id="singlePill""><a href="#">Singles</a></li>
</ul>
<div id="albums">
<img width="500" height="500" id="ilussion" src="https://forums.crackberry.com/attachments/blackberry-q10-f272/171886d1371181552t-bbm-display-picture-limitations-423341110329_qy737vid_l.jpg"></img>
</div>
<div id="singles">
<div id="divSK">
<img width="500" height="500" id="stolenK" src="../CaratulasAlbum/stolenKiss.jpg"></img>
</div>
<div id="divWA">
<img width="500" height="500" id="wander" src="../CaratulasAlbum/wandering.png"></img>
</div>
</div><br><br>
</div>
<div id="footer">
<ul class = "navigationFoot">
<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
</ul>
</div> I have not gotten it to work and I have not found anything that does what I want. I have tried several solutions taken from Stack Overflow in English but I have not achieved anything.
Greetings.