Así, de entrada, lo que quieres hacer se hace por medio de Javascript. No hay manera de que al pasar el ratón por encima de un elemento (hover) <li> se cambie la imagen que se muestra en otro elemento <img>. En todo caso podrías cambiar el estilo del elemento que recibe el hover. La imagen es otro elemento ajeno al item de la lista, por lo que no puedes alterar los estilos mediante el selector :hover.
Lo que sí podrías hacer, solamente con CSS, es apoyarte en el pseudo-elemento after o before para insertar contenido, como una imagen, cuando se hace hover sobre un elemento de la lista.
Te dejo un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Probando hover y :after</title>
<style>
li:hover {
background-color: aquamarine;
padding: 20px;
}
li:hover::after {
position: relative;
left: 20px;
top: 5px;
}
li.img1:hover::after {
content: url(http://lorempixel.com/32/32/sports);
}
li.img2:hover::after {
content: url(http://lorempixel.com/30/30/nature);
}
</style>
</head>
<body>
<ol>
<li class="img1">Probando 1</li>
</ol>
<ol>
<li class="img2">Probando 2</li>
</ol>
</body>
</html>
Pero aunque puedas hacer cosas como estas, usar solamente CSS es un poco rígido y no te dejaría llegar al punto donde deseas. Así que, no te queda otra que usar un poco de Javascript.
De todos modos, el comportamiento que necesitas en Javascript son tres líneas de código si llega.
Te dejo un ejemplo sobre cómo lo podrías hacer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Probando Cambiar imagen con Javascript</title>
<style>
</style>
</head>
<body>
<div class="fondoBloques" id="seccion1">
<h2>Sección 1: Episodios</h2>
<ol id="pelisList">
<li data-imagen="http://lorempixel.com/300/300/nature">Episodio I: La amenaza fantasma.</li>
<li data-imagen="http://lorempixel.com/300/300/sports">Episodio II: El ataque de los clones.</li>
</ol>
</div>
<div class="fondoBloques mainRight">
<img id="foto" src="img/starwars/mini_transparente.png">
</div>
<script>
document.querySelectorAll("#pelisList li").forEach(item => {
item.addEventListener('mouseenter', () => document.getElementById('foto').src=item.dataset.imagen);
})
</script>
</body>
</html>
Solo te quedaría poner el evento "mouseleave" para eliminar la imagen (restaurando tu imagen transparente), cuando se sale del ratón del elemento de la lista.