Member Avatar for koneill

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>
  • 2 Contributors
  • 3 Replies
  • 102 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by mattster

Recommended Answers

All 3 Replies

Member Avatar for mattster

<img src="sills/cat_image_sill.png"><span><span></a>

What the hell is going on here aha? <img> tags can't have child elements and god knows where the </a> came from.

I've solved your problem using some more efficient and better-practicing CSS: jsFiddle

Edited by mattster
Member Avatar for mattster

Awesome! That worked!

Nice one, please upvote and mark solved :)

And yes that css-tricks.com example is great, but not so helpful for what you needed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.