hover to expand image

Forum Moderators: not2easy

Message Too Old, No Replies

hover to expand image

using css to to expand image when hover over

plee61

1:41 am on Feb 19, 2009 (gmt 0)

I am trying to expand an image when mouse hover over it with the code below. Can someone help why .notes:hover is not able to expand the image?
Thanks

<html>
<head>
<style type="text/css" media="screen, tv, tty">
.notes {background-color:blue; color:orange;width:20px;height:20px;overflow:hidden;z-index:2}
a.notes:hover {width:150px;height:170px;overflow:visible;z-index:3}
</style>
</head>

[edited by: swa66 at 2:32 am (utc) on Feb. 19, 2009]
[edit reason] unintentional smiley removed [/edit]

swa66

2:35 am on Feb 19, 2009 (gmt 0)

your html doesn't have a <a> with class="notes", so nothing will match the "a.notes:hover" selector.

D_Blackwell

3:03 am on Feb 19, 2009 (gmt 0)

Depending upon what your ultimate goal is here, there are several options. Don't know that just putting a class to <a> will be what you want. Seems possibly dubious. Depends.

...............

This works, but maybe not for what you are after. I chose to class the <img>. Also chose to comment out the overflow and z-index. Are they needed? If you are simply expanding the image the <a> is not needed. Are you really intending a link?

<html>
<head>
<style type="text/css" media="screen, tv, tty">
.notes {background-color:blue; color:orange; width: 20px; height: 20px; /*overflow:hidden; z-index:2;*/
}
img.test {
width: 20px; height: 20px;
}
img.test:hover {
width:150px; height:170px; /*overflow:visible; z-index:3;*/
}
</style>
</head>
<body>

<div class="notes">
<a href="">
<img src="aaa.jpg" alt="" class="test" />
</a>
</div>
</body>
</html>

[edited by: eelixduppy at 5:23 pm (utc) on Feb. 19, 2009]
[edit reason] disabled smileys [/edit]

plee61

3:52 am on Feb 19, 2009 (gmt 0)

my intention is to display images and descriptions of some sticky notes when mouse hover over them.

why is .notes:hover not able to expand the content within div?

<html>
<head>
<style type="text/css" media="screen, tv, tty">
.notes {background-color:blue; color:orange;width:20px;height:20px;overflow:hidden;z-index:2}

.notes:hover {width:150px;height:170px;overflow:visible;z-index:3}
</style>
</head>
<body>

<div class="notes" id="point1" >
<a href="#"><img src="image1.jpg" alt=""/>
<p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station

</p>
</a>
</div>

<div class="notes" id="point2" >
<a href="#" ><img src="image2.jpg" alt=""/>
<p>
<span>5:30 a.m.</span> Stop at Mills Moraine
</p>
</a>
</div>

</body>
</html>

[edited by: eelixduppy at 5:23 pm (utc) on Feb. 19, 2009]
[edit reason] disabled smileys [/edit]

D_Blackwell

5:43 am on Feb 19, 2009 (gmt 0)

First thing that jumps out is non-validated code. You shouldn't wrap a <p> with <a>. Block level elements (<p>) are not allowed inside inline elements (<a>).

You can get away with it - but not 'best practice' IMO, and will ultimately result in problem upon problem.

................

Also, the comment in the CSS is using HTML commenting:

Correct CSS commenting is: /*Comment out.*/

[edited by: eelixduppy at 5:23 pm (utc) on Feb. 19, 2009]
[edit reason] disabled smileys [/edit]

plee61

12:35 am on Feb 20, 2009 (gmt 0)

By adding id (id.class:hover) the sticky note is able to expand when hover over. but if i have many sticky notes, i will need to repeat each of them. Hopefully someone can explain why .class:hover {width:150px;height:170px;overflow:visible;z-index:3} does not work.

<html>
<head>
<style type="text/css" media="screen, tv, tty">
.notes {background-color:blue; color:orange;width:20px;height:20px;overflow:hidden;z-index:2}

#point1.notes:hover
{width:150px;height:170px;overflow:visible;z-index:3}
#point2.notes:hover
{width:150px;height:170px;overflow:visible;z-index:3}
</style>
</head>
<body>

<div class="notes" id="point1" >
<a href="#"><img src="image1.jpg" alt=""/>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station
</a>
</div>

<div class="notes" id="point2" >
<a href="#" ><img src="image2.jpg" alt=""/>
<span>5:30 a.m.</span> Stop at Mills Moraine
</a>
</div>

</body>
</html>

[edited by: swa66 at 12:57 am (utc) on Feb. 20, 2009]
[edit reason] smileys [/edit]

D_Blackwell

7:14 am on Feb 20, 2009 (gmt 0)

plee61,

Short of coding you something from scratch, which is where I would start, I would recommend that you search CSS popup text or similar and get a grasp of the basic 'how and why' of how they work and what your options are.

..................

This is difficult to explain from ground zero without simply doing the work for you. A thorough reading and testing of tutorials will be the best learning ground. Start with some simple :hover techniques and build from there. You can bring back problems for analysis, repair, and suggestions, but I think you need a more basic grounding in :hover before jumping to more sophisticated trickery. I could code an answer but you wouldn't understand it.

I am concerned that the declaration for .notes is already unnecessarily convoluted. Further, the ID #point1.notes:hover is a problem because the period or dot is not an allowed character in a CSS ID. Perhaps you meant #point1 .notes:hover - which is something altogether different, but still won't work with your code. I still think that, although easier, it would be better learning and better practice not to build your :hover around <a> without reason. Based on what I've seen so far, they can be dumped. Learning how to hide and show your <span> or your .notes:hover will better serve your interests.

I know that this is not an solution, but I will be very happy to help when you've got some code that is strong enough for tweaking rather than rebuilding.

swa66

11:29 am on Feb 20, 2009 (gmt 0)

I do think you're struggling most with selectors.

The standard is here: [w3.org...]
But I'm not that confident it'll help you yet.

So, perhaps it's better to start first at [w3schools.com...]

With what you're trying to do there are quite a few caveats.

First reducing an image in size works nice enough, till you look at the horrible algorithm used in IE. Also, considering download issues of getting all the images in high resolution before your page is displayed, you might want to make individual thumbnails instead.

Caption text under a 20px wide thumbnail is going to be hard in your layout, what do you want to happen with text wider than your thumbnail ...

In my experience users expect to click on a thumbnail to get a pop-up of the image. This "click" means you need javascript to help you out, CSS alone can only do hover and it'll confuse your users (my experience, YMMV).

Finally when redrawing on hover take care not to cause a flickering effect.
(if you un-hover due to the redraw, the browser will go in a loop of redraws till the visitor moves the mouse away, by that time they might have elft your site already).

If you use an <a> tag, be ready to knwo what you want to happen if a user does click on it.

Also for your html, it's probably best to use a bit more semantically significant things than wrapping <a> elements in a <div>. It it's a list, an image, ... use the appropriate tags to go where you need to be without CSS.

Doing a little tutorial style example is easy enough, if you elaborate a bit on the above points and what you want to happen.