CODEWITHSUNDEEP
htmlcss
YishaiG
YishaiG

Reputation: 99

Covering an image using a div element

My Fiddle

http://jsfiddle.net/yjw46/2/

My Goal

I have this beautiful wheel of colors as a PNG. (I also have it as an SVG). When one of the colors is clicked, I want the WHOLE circle to change to that color. For example, if red is clicked, I want the whole wheel to turn red instead of colorful.

How I Intended to do it

I wanted to have a transparent (in the Fiddle it's semi-transparent, for debugging purposes) div in the shape of a circle (using border-radius) that will be DIRECTLY ON my color-wheel-image. When a color is pressed, I planned for the div to stop being tranparent, and (in a beautiful transition) turn to that color, making it look like the whole wheel has changed color.

Problem

I cannot get the div to cover the image.

So

I'd be glad to hear either why my technique didn't work, or a better technique, if you have one.

Upvotes: 2

Views: 87

Answers (4)

Ruddy
Ruddy

Reputation: 9923

You was very close, simply chanage position: relative; to position: absolute; (on the div you want to have over the image) to fix the problem.

Now remember we need to have the parent as position: relative; or the absolute positioned div will not sit in the parent. You have already set this so its good to go.

Find more on position: absolute; here.

Demo here

#circleCover {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 2;
    border-radius: 150px;
    background-color: rgba(0, 0, 0, 0.2);
}

Here is a little demo to show what will happen without the relative position being set on the parent with the child having absolute.

Demo Without Relative

So you can see that the child is not staying within the parent.

And here is the parent with relative position.

Demo With Relative

As here the child does stay within the parent. This should help you understand why that is needed for the task you are trying to accomplish. Any questions please do just leave a comment and I will get back to you.

Upvotes: 2

user3218194
user3218194

Reputation: 458

<div id="circleWrap">
  <img src="http://y.emuze.co/circle.png" id="colorCircle"/>
  <div id="circleCover" >
  </div>
</div>

I have kept Your div one above the other

#colorCircle {
    position: relative;
    top: 0px; left: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    top:0px;
}

#circleWrap {
    position: relative;
    top: 0px;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

#circleCover {
    width: 300px;
    height: 300px;
    position: relative;
    top: -302px; left: 0px;
    z-index: 2;
    border-radius: 150px;
    background-color: rgba(0, 0, 0, 0.2);
}

Here it is in action: http://jsfiddle.net/yjw46/7/

Upvotes: 1

Wilf
Wilf

Reputation: 2315

Just add position:absolute in #colorCircle

#colorCircle {
    position: relative;
    top: 0px; left: 0px;
    z-index: 1;
    width: 300px;
    height: 300px;
    position:absolute;
}

Upvotes: 0

redditor
redditor

Reputation: 4276

Change your CSS slightly.

#circleCover {
   top:-304px; 
}

Fiddle

Upvotes: 0

Related Questions