Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0
}
html, body {
height:100%;
}
p {
margin:10px 10px 20px
}
.outer {
border:5px outset blue;
width:50%;
overflow:hidden;
background:blue;
margin:50px auto;
opacity:0.4;
position:relative;
z-index:2;
color:#fff;
}
.outer img {
float:left;
margin:10px;
display:inline;
}
p.view {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
margin:0;
}
</style>
<!--[if IE ]>
<style type="text/css">
.outer{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
<p><img src="../../testing2/images/zimg4.jpg" width="300" height="300" alt="Sea View">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum.. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum. </p>
</div>
<p class="view"><img src="../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
</body>
</html>
As mentioned above you can change the code to suit as much as you like but my original answer doesn't change more than half a dozen lines at most. However see what you can come up as all methods will be of interest. You will have to use your own images for the example and if you can make a prettier example then mine then all the better
Bookmarks