Fade in Overlay

Fade in Overlay
0

#1

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?


#2

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;

#3

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.