CODEWITHSUNDEEP
htmlcss
MiceOnFire
MiceOnFire

Reputation: 3

Placing specifically placed images in a div -HTML/CSS

I am trying to place 5 little circle images over one image but the circles need to be in specific spots. How would I do that where it would also be scaleable? I already have most of the page built except for this one part.

I tried wrapping it all in one div, then using padding and/or margins on the circles to place them correctly, but I can't seem to get everything correct and they move when being scaled down.

Upvotes: 0

Views: 49

Answers (2)

zer00ne
zer00ne

Reputation: 43880

  1. Make a <div class="primaryImage"></div>

  2. Then in <style> or your CSS file: .primaryImage { background: url(path/img.png) no-repeat; position: relative; }

  3. Now make your circles <img class="circle" src="path/circle.gif"/> and place them inside .primaryImage

  4. Then in the same place as #2: .circle { position: absolute; }

  5. Assign an id* to each circle. Example: <imgid="c1"class="circle" src="path/circle.gif"/>

  6. After you have assigned a unique id to each circle <img> assign the following style rules as you did in #2 and #4:

     #c1 { top: 0; left: 0; } /* Top left corner */

 #c2 { bottom: 0; left: 0; } /*Bottom left corner */

 #c3 { bottom: 0; right: 0; } /* Bottom right corner */

 #c4 { top: 0; right: 0; } /* Top right corner */

 #c5 { top: 50%; left: 50%; } /* center */

*All classes and ids are arbitrary as well as the top, bottom, left, and right properties, they can be anything you want.

Upvotes: 0

pwnchaurasia
pwnchaurasia

Reputation: 1499

firstly you must post some code here or on jsfiddle.net or codepen . so that we can see what you have tried and what you are asking for.

secondly I am answering your question without knowing what you have tried so it may or may not be the answer of your question.

solution--

  1. take div and use position absolute for positioning the circles .
  2. you can use id or class for each circle an position them .
  3. now for every circle use eg:-transform: scale(2,3); property to scale the image on hover or whatever you want.

hope this may help you. but do post your code here for better assistance

Upvotes: 1

Related Questions