CSS and HTML 5 – Opacity for Text and Images

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.


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;


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

<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>


Be the first to comment

Leave a Reply