CSS and HTML 5 – Opacity for Text and Images

Eli the Computer Guy *NEW, CSS and HTML 5

Changing the opacity of text or pictures can make them easier to view by users. You can also use :hover to show when an object is being hovered over.

opacityStyle.css

img {
	width: 100%;
	height: auto;
}

img:hover {
	opacity: 0.7;
}

.opacity08 {
		opacity: 0.8;
}

.opacity05 {
		opacity: 0.5;
}

.opacity02 {
		opacity: 0.2;
}

.textOpacity {
	opacity: 0.8;
	background-color: grey;
}

.textOverlay {
  	position: relative;
  	width: 300px;
  	height: auto;
  	margin-left: auto;
  	margin-right: auto;
}

.overlay-title {
  	position: absolute;
  	top: 0px;
  	left: 16px;
	color: black;
	background-color: lightgrey;
}

opacity.html

<html>
<head>
<link rel="stylesheet" href="opacityStyle.css" />
</head>
<body>

<img src="picture700.jpg">
<img class="opacity08"src="picture700.jpg">
<img class="opacity05"src="picture700.jpg">
<img class="opacity02"src="picture700.jpg">

<h1 class="textOpacity">This is see-through text</h1>

<div class="textOverlay">
<img src="picture700.jpg">
<h2 class="overlay-title">See-Through Text</h2>
</div>

</body>
</html>