Hover and expand image

[lowellg]

I'm using this code so when a thumb is hovered over it will enlarge. Is there a way to specify the location on the screen of the expanded image? Right now all images are expanding down and to the right... maybe that's the default?

Code: Select all

<a class="thumbnail" href="#thumb"><img style="float: left;" src="uploads/images/nickbio_thumb.png" border="0" alt="nick peraino dr fretgood guitar amp pedal tech" /><span><img src="uploads/images/nickbio.png" alt="nick peraino dr fretgood guitar amp pedal tech" /></span>

[M@rtijn]

This is HTML code, it only displays a picture.

Positioning is always done in CSS.

Where is your CSS?
Where is a working link to the website?

Come on! Do we really have to ask you for the relevant information every time you create a topic?

[lowellg]

Martijn,
I'm sorry please be patient with me. I know you probably deal w/ this all the time so I'm sorry for being "that guy." I'm clearly still getting the hang of posting "smoothly" on this forum.

Here's a link to the site:
http://6e4c350c.c28.servage.net/

Here's the CSS:

Code: Select all

.thumbnail{ position: relative; z-index: 0; }  .thumbnail:hover{ background-color: transparent;  z-index: 50; }  .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }  .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; }  .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; } 

[M@rtijn]

http://forum.cmsmadesimple.org/viewtopi ... 15#p252415

[lowellg]

Yes Martijn I saw that. It's very odd, as it works great for me, but not on my Android phone.. In any case I'm going to upload my new site so it's THERE. Then hopefully you can better help me.

[lowellg]

Alright. Well I just redirected my Domain Name so you may or may not be able to see my site now as it takes 24-48 hours to propagate around the globe. Try it out: http://www.drfretgood.com

[M@rtijn]

I assume you're talking about the hover images on the 'doctors in the house' and when you hover them the popup shows relative to the box you've just hovered over?

Yes, that's default behaviour.

I've tried to look at it, but the nested tables keep me from even trying. Please read this: Why tables for layout is, well, not really the way to go

[lowellg]

Martijn,
Thanks for the link to info on why NOT to use tables. That's very good to know. I will be redoing my site to better suit this style of webdesign.

In the meantime, I'm not sure I understand. You're not able to see my CSS to figure out how to place the enlarged image because of the tables?

[uniqu3]

In your CSS find this:

Code: Select all

.thumbnail:hover span {
  left:60px;
  top:0;
  visibility:visible;
}

now you could play with left: and top: values to get the desired position of your hovered image.

[lowellg]

Thanks Uniqu3,

How do I then modify the code?

Code: Select all

<div><a class="thumbnail" href="#thumb"><img style="float: left;" src="uploads/images/ivanbio_thumb.png" border="0" alt="ivan martirena dr fretgood guitar tech" /><span><img src="uploads/images/ivanbio.png" alt="ivan martirena dr fretgood guitar tech" /></span></a></div>

[lowellg]

I found said code

Code: Select all

.thumbnail:hover span {
  left:60px;
  top:0;
  visibility:visible;
}

But when I change those values nothing happens. Do I need to modify my code in the content page too?

Code: Select all

<div><a class="thumbnail" href="#thumb"><img style="float: left;" src="uploads/images/ivanbio_thumb.png" border="0" alt="ivan martirena dr fretgood guitar tech" /><span><img src="uploads/images/ivanbio.png" alt="ivan martirena dr fretgood guitar tech" /></span></a></div>

I was thinking maybe I need to change the

Code: Select all

a class="thumbnail"

to

Code: Select all

a class="thumbnail:hover span"

but that didn't work either.

[Dr.CSS]

It seems to be working to me if not maybe an image of what you want it to look like on hover would help...

[lowellg]

Okay I guess I wasn't using big enough numbers to notice it in fact DOES work.. thank you.

Last question on this. Is there an easy way to have ALL images that expand on hover be in the CENTER of the screen? I've found some answers on how to do this with 1 specific image, but not for ALL images on a site.

Here's the code on how to do this with 1 specific image that is 200px wide and 100px tall. If my images are all different sizes this won't work.

Code: Select all

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}