Page 1 of 1
Hover and expand image
Posted: Mon Apr 18, 2011 4:43 pm
by 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>
Re: Hover and expand image
Posted: Tue Apr 19, 2011 8:47 am
by 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?
Re: Hover and expand image
Posted: Tue Apr 19, 2011 9:31 am
by 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; }
Re: Hover and expand image
Posted: Tue Apr 19, 2011 9:50 am
by M@rtijn
Re: Hover and expand image
Posted: Tue Apr 19, 2011 11:07 pm
by 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.
Re: Hover and expand image
Posted: Wed Apr 20, 2011 2:47 am
by 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
Re: Hover and expand image
Posted: Wed Apr 20, 2011 7:54 am
by 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
Re: Hover and expand image
Posted: Sat Apr 23, 2011 9:32 am
by 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?
Re: Hover and expand image
Posted: Sat Apr 23, 2011 11:52 am
by 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.
Re: Hover and expand image
Posted: Wed Apr 27, 2011 5:17 am
by 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>
Re: Hover and expand image
Posted: Sat Apr 30, 2011 8:27 am
by 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
to
but that didn't work either.
Re: Hover and expand image
Posted: Sun May 01, 2011 7:53 pm
by 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...
Re: Hover and expand image
Posted: Mon May 02, 2011 5:01 am
by 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;
}