CODEWITHSUNDEEP
htmlcssimage
Abdul Basit
Abdul Basit

Reputation: 722

How to place an image on top left of another image without using Javascript?

I have an image in the center of a div

enter image description here

The image is centered in the parent div using the following css:

img { margin:0px auto; }

The image can have arbitrary dimensions.

How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?

Upvotes: 2

Views: 4855

Answers (6)

Romeo Ching
Romeo Ching

Reputation: 18

set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative

Upvotes: 0

TomFirth
TomFirth

Reputation: 2364

I would make a div for the image, set the background the image and add:

position: relative;

for that div. Then put the magnifying glass within the div and set:

position: absolute: top: 0; left: 0;

.image { background: url(eiffel.jpg); position: relative; width: 100px; height: 200px;} .image img { position: absolute; top: 0; left: 0:}

The 'relative' is what any 'absolute' objects..relate to.

I hope that helps.

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

User position:relative and position:absolute. Look at the following HTML and CSS.

HTML

<div class="parent">
  <div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
    <img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
  </div>
</div>

CSS

.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{  
  display:inline-block;
  position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}

FIDDLE DEMO

Upvotes: 1

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

Try Use this

jsfiddle

div{
content:"";
display:block;
height:300px;
width:300px; 
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;    
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png"); 
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}

Upvotes: 0

Jivanysh Sohoni
Jivanysh Sohoni

Reputation: 57

Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.

http://jsbin.com/yumelamive/5/edit?html,css,output

Upvotes: 1

himanshu
himanshu

Reputation: 1797

i am not sure it will work or not but try using before will help

img:before {
    content: 'img/zoom.png ';
    position:absolute;
    top:0px;
    left:0px;
}

for proper help atleast provide a jsfiddle or code of your work

Upvotes: 0

Related Questions