How to position smaller image in the corner of bigger one?

Question

Hello I have several big images in my div, and one small magnifier image, which i want dynamically position in every image right-top corner. My big images are switching by clicking on them. Their sizes are different. Right now i'm trying to get every image height and width and position small image manually - is there any way to do this better?

Small magnifier image has higher z-index than the bigger ones.

MY JQUERY CODE:

        $('img.small').fadeOut('fast', function() {

        $('img.small').css('top',$(el).find('img.big:last').height()+60); // i want to change this
        $('img.small').css('top',$(el).find('img.big:last').width()+60); // and this

        $('img.small').fadeIn(); 
        });

MY CSS:

 #myGallery {
   width: 100%;
   height: 300px;
  }



.small img{
position: absolute;
left:150px;
top:150px;
z-index: 15000;
width: 35px;
height: 35px;   
}

MY HTML:

<div id="myGallery" class="spacegallery">   

<img class="small" src="small.jpg" alt=""  />   
<img class="big" src=images/bw1.jpg alt=""  />
<img class="big" src=images/bw2.jpg alt=""  />
<img class="big" src=images/bw3.jpg alt=""  />

            </div>

Thanks!

Wow, so what does it mean? I'm quite new here. What can i do? — pawel, Apr 29 '12 at 12:34
And what's your HTML? Can you add that into your question, and post a live demo [at JS Fiddle](http://jsfiddle.net/), or similar? — David Thomas, Apr 29 '12 at 12:39
@David I added my HTML and CSS into my question. The idea is simple, there is an image, and when i click on it - it changes into another image (another size) and small.jpg should be positioned in it's right top corner. — pawel, Apr 29 '12 at 12:49
That's the part of much bigger script, and i have about 10 galleries on my page. $(el) is symbolizing this particular one. It's an argument in this function. My main problem is if I can catch the position of img.big:last in my #myGallery div. — pawel, Apr 29 '12 at 13:08
Let me see if I understand your requirement: you want to display the small image in the upper corner of *every* image of `class='big'`? Always-visible, or just on-hover? — David Thomas, Apr 29 '12 at 13:09

David Thomas · Accepted Answer · 2012-04-29T13:34:36.133

1

For this, so long as your users are relatively up-to-date in their browsers, you could just use CSS, albeit that requires some mark-up changes:

<div id="myGallery" class="spacegallery">
    <span class="imgWrap">
        <img class="big" src='http://davidrhysthomas.co.uk/img/dexter.png' alt=""/>
    </span>
    <span class="imgWrap">
        <img class="big" src='http://davidrhysthomas.co.uk/img/mandark.png' alt=""/>
    </span>
</div>

And CSS:

#myGallery {
    width: 100%;
    height: 300px;
}

.imgWrap {
    float: left;
    position: relative;
}

.imgWrap::after {
    content: url(http://davidrhysthomas.co.uk/img/glass.png);
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.3);
    border-radius: 0.5em;
}

JS Fiddle demo.

If, however, you'd prefer to use jQuery, then I'd suggest the following:

var glass = $('<img />', {
    src: 'http://davidrhysthomas.co.uk/img/glass.png', // host your own image though. Please.
    class: 'glass'
}).clone();

$('.big')
    .wrap('<span></span>')
    .addClass('wrap')
    .parent()
    .addClass('wrap')
    .append(glass);

Which is based on your own posted mark-up, and the JS Fiddle demo is here.

edited Apr 29 '12 at 13:34

answered Apr 29 '12 at 13:18

David Thomas

249,100
51
377
410

I was trying to implement your first solution, but the magnifier image shows in the corner of #myGallery area no in the corner of my image. It's like that in here: http://derivativeofln.com/screen.png I'm using it with spacegallery script: http://www.eyecon.ro/spacegallery/ – pawel Apr 29 '12 at 13:56
Have you specified `position: relative;` on the image's parent? – David Thomas Apr 29 '12 at 14:02
You mean in .spacegallery class? – pawel Apr 29 '12 at 14:16
No, I mean the span that wraps each image. Which is required in order to generate the `::after` pseudo-element, and to avoid the small images all being rendered in the same place. – David Thomas Apr 29 '12 at 14:47
Hmm, David, how can I do a thing, that CSS method works, when i will paste `` i mean, without SPAN? – pawel Apr 29 '12 at 14:51
An `img` element doesn't implement generated-content; that's the only reason I used the `span` in the first place. See: [does `:before` not work on `img` elements?](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-tags) and [Why don't pseudo-elements work with `img` elements?](http://stackoverflow.com/questions/7396469/why-dont-pseudo-elements-work-with-img-elements) – David Thomas Apr 29 '12 at 15:04

score 0 · Answer 2 · answered Apr 29 '12 at 13:17

If you don't place the pictures inside div wrappers, I would have done the same way you did. If you can place a wrapper, I might have put the magnifier image in every wrapper and make it visible through css when the wrapper itself has the "big" class. For instance:

div.big {
position: relative;
}
div.big img.magnifier {
display: block;
position: absolute;
top: 0px;
right: 0px;
}
div.small img.magnifier{
display: none;
}

and in your html

<div class="small">
<img src="..." />
<img src="..." class="magnifier" />
</div>
<div class="small">
<img src="..." />
<img src="..." class="magnifier" />
</div>
<div class="big">
<img src="..." />
<img src="..." class="magnifier" />
</div>

And finally, in your js:

$('img.magnifier').bind('click', function() {
$(this).siblings('img').attr('src', '..your small picture...');
})

How to position smaller image in the corner of bigger one?

2 Answers2