Centering enlarged image on mouse hover

  • 1
  • Question
  • Updated 6 years ago
I added a picture gallery (custom coding) to my school website
http://www.smkpuchongutama1.com/akade...
but the pictures on the right and at the lower bottom are cut off when zoomed (mouse hover). How do I correct this (centered the enlarged image)?

Thanks for your help.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Laili
You've placed the enlarger css coding in the site css overrides which is I think the problem, delete it from there and place it in a HTML widget on your gallery page using this code inbetween the <!-- -->

<!--
<style type="text/css">

Your enlarger code here

</style>
-->

There is also some adjustment in the code under .ienlarger a:hover span
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Thanks David but that didn't work!

but i did remove '.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
} (I googled this)
and the zoomed pop up now went above ...

How do i make the pop up appear on the center of the page?
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Laili, the code is still showing in the site overrides, have you published the edits? You also need to paste back in the code you deleted.
Can you provide a link to the site you got the code from.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
The link is http://www.dynamicdrive.com/style/css...

I have many pictures to upload to the web and I really like this gallery. I'd love to have this gallery if I can centre the zoomed image. This gallery is the easiest since only one picture is used both for the thumbnail and the zoomed one.

Really glad if you can help me.
Photo of David

David

  • 465 Posts
  • 94 Reply Likes
Hi Laili
Gop's suggestion is sound and I think the only answer if you wish to continue to use your present gallery. I'm currently using a dynamic drive gallery on my site which centres the large images but you do need two images, this is it

http://www.dynamicdrive.com/dynamicin...
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Selamat petang Laili,

You may like to try position:fixed

see the section in W3schools tutorial on position
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Hi Gop,

I think I've got this settled.

Please visit http://www.smkpuchongutama1.com/blog-... and
http://www.smkpuchongutama1.com/blog-...

Please advise on which one is better for the school web.

Thank you. Appreciate your time on this.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Laili,

They both look good but I think that the second (http://www.smkpuchongutama1.com/blog-...) is a better way of presenting a school activity. The contents of the album are most interesting to your fellow students and families and of course your teachers. A slide show is a good way to show the spectrum of your activity on the camp.

Ask a few of your fellow students and a teacher or two and see what they like as well?

Gop.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
Hello,

Yup, I think I prefer the slide show, too! You did say you think this one is better right? I got confused with your choice. heheheee ...

But, I'm afraid many slide shows will then slow the page loading. Won't they?

Selamat malam.

Laili
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Yes. The slide show is my choice.

You can limit the number of displayed posts in your blog at the one time and this will in effect prevent an unviewed slide show loading.
Photo of Laili

Laili

  • 14 Posts
  • 0 Reply Likes
I'll do as you suggest. Thanks.