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
  • 135 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Short version: the markup and where you set opacity were the root causes. As pointed out, an <img> cannot contain child elements, so the overlay span in the original markup was misplaced. Put both visuals inside a positioned wrapper and apply opacity only to the overlay element (not the parent), so the base image stays fully opaque.

A simple, robust pattern using a pseudo-element:

<div class="frame">
  <img src="sills/cat_image_sill.png" alt="cat">
</div>

.frame {
  position: relative;
  display: inline-block;
}

.frame::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("sills/dog_image_sill.png") no-repeat center center;
  background-size: cover;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.5s;
}

Notes and troubleshooting tips:

  • Do not set opacity on the wrapper if you only want the overlay translucent; that affects all children. See MDN on opacity for details: opacity.
  • Setting opacity < 1 can create a new stacking context, which can change how z-index behaves. If layering seems wrong, check stacking contexts: .
  • Alternatives: layer two absolutely positioned <img> elements and control their z-index, or use CSS multiple backgrounds when appropriate: using multiple backgrounds.
  • If the overlay should not block clicks on the base image, use pointer-events: none on the overlay (shown above).

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.