All,
I am trying to use opacity to have one image on the page behind another image. The below code creates the opacity for the image in the div - but the other image doesn't display. Therefore, I'm wondering how this can be done as I have a few small projects going on right now - where I need to use this effect for display purposes.
<html>
<head>
<META charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
div {
opacity: 0.5;
filter: Alpha(opacity=50);
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.arrow span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(sills/dog_image_sill.png) no-repeat;
background-position: -150px 0;
opacity: 0.5;
filter: Alpha(opacity=50);
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
</style>
</head>
<body>
<div>
<img src="sills/cat_image_sill.png"><span><span></a>
</div>
</body>
</html>