Fade in Overlay

This tutorial on w3schools.com works by itself but doesn’t work with my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS Styling Images</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
<style>
    img.rounded {
        border-radius:8px;
    }
    img.circled {
        border-radius:50%;
    }
    img.thumbnail {
        border:1px solid #ddd;
        border-radius:4px;
        padding:5px;
        width:150px;
    }
    img.link {
        border:1px solid #ddd;
        border-radius:4px;
        padding:5px;
        width:150px;
    }
    img.link:hover {
        box-shadow:0 0 2px 1px rgba(0,140,186,0.5);
    }
    img.responsive {
        max-width:100%;
        height:auto;
    }
    img.centered-image {
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
    body {margin:25px;}
    div.polaroid {
        width:80%;
        background-color:white;
        box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
        margin-bottom:25px;
    }
    div.container1 {
        text-align:center;
        padding:10px 20px;
    }
    img.opacity-different {
        opacity:0.5;
        filter:alpha(opacity=50); /* For IE8 and earlier */
    }
    img.filter {
        width:33%;
        height:auto;
        float:left;
        max-width:235px;
    }
    .blur {-webkit-filter:blur(4px);filter:blur(4px);}
    .brightness {-webkit-filter:brightness(250%);filter:brightness(250%);}
    .contrast {-webkit-filter:contrast(180%);filter:contrast(180%);}
    .grayscale {-webkit-filter:grayscale(100%);filter:grayscale(100%);}
    .huerotate {-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg);}
    .invert {-webkit-filter:invert(100%);filter:invert(100%);}
    .opacity {-webkit-filter:opacity(50%);filter:opacity(50%);}
    .saturate {-webkit-filter:saturate(7);filter:saturate(7);}
    .sepia {-webkit-filter:sepia(100%);filter:sepia(100%);}
    .shadow {-webkit-filter:drop-shadow(8px 8px 10px green);filter:drop-shadow(8px 8px 10px green);}

    .container-ov {
        position:relative;
        width:50%;
    }
    .imageoverlay {
        display:block;
        width:100%;
        height:auto;
    }
    .overlay {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        height:100%;
        width:100%;
        opacity:0;
        transition: .5 ease;
        background-color:#008CBA;
    }
    .container-ov:hover .overlay {
        opacity:1;
    }
    .textoverlay {
        color:white;
        font-size:20px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        -ms-transform:translate(-50%,-50%);
    }
</style>
</head>
<body>
    
<h2>Rounded Images</h2>
<p>Use the border-radius property to create rounded images:</p>

<img class="rounded" src="paris.jpg" alt="Paris" width="300" height="300">

<p>Use the border-radius property to create circled images:</p>
<img class="circled" src="paris.jpg" alt="Paris" width="300" height="300">

<h2>Thumbnail Images</h2>
<p>Use the border property to create thumbnail images:</p>

<img class="thumbnail" src="paris.jpg" alt="Paris" style="width:150px;">

<h4>Thumbnail Image as Link</h4>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>

<a target="_blank" href="paris.jpg">
    <img class="link" src="paris.jpg" alt="Paris" style="width:150px;">
</a>

<h2>Responsive Images</h2>
<p>Responsive images will automatically adjust to fit the size of the screen.</p>
<p>Resize the browser window to see the effect:</p>

<img class="responsive" src="../img_fjords.jpg" alt="Norway" width="1000" height="300">

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img class="centered-image" src="paris.jpg" alt="Paris" style="width:50%;">

<h2>Responsive Polaroid Image / Cards</h2>

<div class="polaroid">
    <img src="../img_mountains.jpg" alt="Norway" style="width:100%;">
    <div class="container1">
        <P>The Troll's tongue in Hardanger, Norway</P>
    </div>
</div>

<div class="polaroid">
    <img src="../img_aurora.jpg" alt="Norway" style="width:100%;">
    <div class="container">
        <p>Northen Lights in Norway</p>
    </div>
</div>

<h2>Image Transparency</h2>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity;</p>
<img class="opacity-different" src="../img_forest.jpg" alt="Forest" width="170" height="100">

<h3>Image Text:</h3>
<p>How to position text in an image:</p>
<a href="../CSS Layout - Display.htm#follow" target="_blank">Follow Me</a>

<h2>Image Filters</h2>

<img src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="../pineapple.jpg" alt="Pineapple" width="300" height="300">

<h2>Fade in Overlay</h2>

<div class="container-ov">
    <img src="business-man-cartoon-presenting-illustration-45106351.jpg" alt="Avatar" class="imageoverlay">
    <div class="overlay">
        <div class="textoverlay">Hello World</div>
    </div>
</div>


</body>
</html>

The transition property doesn’t work at all and only hover works. Why is this?

If you open up chrome devtools and select that element, it will show that the transition property is invalid. On closer inspection, you missed a letter

transition: .5 ease;
// should be
transition: .5s ease;
1 Like

That’s quite annoying I’ll tell you that much. I spent over two hours trying to figure it out and even creating a test page that replicates every thing w3schools did. And it’s only a letter I missed. Anyways thanks. That was a really good catch.