I was trying to implement a slideshow with fade-in and fade-out images.

But the basic thing of fading in just won't work for me.
The opacity attribute works fine.
It's the transition of opacity that is stuck.

I'm on an old PC with XP SP3, if that makes any difference.
I've been using Firefox and Chrome as browsers.
But I've been able to see other people's fade fiddles on this PC.
So I'm curious as to why my [fade-fiddle](https://jsfiddle.net/trunk/xky9bug4/) doesn't run as planned.

All ideas towards the right path welcome.

**HTML**

```
    <!DOCTYPE html>
        <title>Test Fade</title>

    <body>
  <br/>
  <br/>

        <div class="fade-div" >
    <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
        </div>

    </body> 

```

**CSS**

```
body {
       background-position: center center;
       text-align: center;
       width: 250px;
       height: 250px;
       margin: 0 auto;
    }

    .fade-div {
      position: relative;
      top: 0;
    }

    img {
      height: 200px;
      width: 200px;

   }

   .fade-in {
      opacity: 1;
      transition: opacity 2s linear;
   }

```