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?