I am trying; please forgive my ignorance. My goal in this code is to have the three separate images (img) display themselves with onmouseover and show up in the image here:

<div id = "image">

This is for a class project, but I have tried everything and am just so simply lost. Can anyone explain what I am doing wrong?

<div id = "image">Hover over an image below to display here.
</div>

<img class = "preview" alt = "Styling with a Bacon"  src ="https://s3-us-west.jpg"
onmouseover = "showProperties(this)" 
"document.getElementById('this')".innerHTML='Styling with Bacon'
onmouseout = "document.getElementById('image').innerHTML='Hover over an image';">


/*JavaScript*/

body
margin: 2%;
border: 2px solid black;
background-color: gray;

image
line-height:650px;
width: 575px;
height: 650px;
border:5px solid black;
margin:0 auto;
background-image: url('');
background-repeat: no-repeat;
color:#FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom:25px;
font-size: 150%;

.preview
width:10%;
margin-left:17%;
border: 10px solid black;

img
width:95%;

function "showProperties(element)"
document.getElementById('image').innerHTML = element.image;