homepage Welcome to WebmasterWorld Guest from 54.196.18.51
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
altering the size and position of an images hovered state
wright67uk




msg:4375244
 10:14 pm on Oct 16, 2011 (gmt 0)

Im trying to assign a hover state to the nine thumbnail images in the code below;

Ive tried
.thumbs a img:hover {height:100px; width:100px;} to make the image larger but with no joy. any ideas? (im using IE)

www.example.com/circles.html

eventually I plan to get the hovered state image to appear in the large circle and was thinking along the lines of;
.thumbs a img:hover {position: absoloute; top 150px; left 150px} ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Animated Circular Portfolio with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Example " />
<meta name="keywords" content="example"/>
<link rel="stylesheet" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#a7cede;
}
.title{
position:absolute;
top:0px;
left:0px;
width:130px;
height:570px;
background:#a7cede url(http://www.example.com/title.png) no-repeat top left;
}
a.back{
background:transparent url(http://www.example.com/back.png) no-repeat 0px 0px;
position:absolute;
width:150px;
height:27px;
outline:none;
top:2px;
right:0px;
}
.wrapper{
font-family: Verdana;
font-size:11px;
width:600px;
height:600px;
position:relative;
top:11px;
left:11px;
}
.images img{
display:none;
position:absolute;
left:6px;
top:6px;
}
.circleBig{
position:absolute;
top:0px;
left:0px;
width:368px;
height:368px;
background:transparent url(http://www.example.com/circlebg.png) no-repeat top left;
}
.menu{
position:absolute;
width:101px;
height:74px;
top:210px;
left:220px;
z-index:999;
}
a.about, a.portfolio, a.contact{
float:left;
clear:both;
height:23px;
margin-bottom:10px;
width:105px;
text-indent:-2000000px;
opacity:0.8;
background:transparent url(http://www.example.com/menu.png) no-repeat top left;
}
a.portfolio{
width:90px;
background-position:-105px 0px;
}
a.contact{
width:88px;
background-position:-199px 0px;
}
a.about:hover, a.portfolio:hover, a.contact:hover{
opacity:1.0;
}
.circle{
margin-top:-88px;
margin-left:-88px;
width:176px;
height:176px;
position:absolute;
left:0;
top:0;
background:transparent url(http://www.example.com/circle.png) no-repeat top left;
z-index:10;
opacity:0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
.description{
width:120px;
margin:40px auto;
text-align:center;
}
.description ul{
list-style:none;
text-align:center;
}
.description ul a{
line-height:30px;
font-weight:bold;
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:11px;
text-shadow:1px 1px 1px #aaa;
}
.description ul a:hover{
color:#f0f0f0;
}
.thumbs a img{
border:3px solid #f9f9f9;
-moz-box-shadow:1px 1px 2px #999;
-webkit-box-shadow:1px 1px 2px #999;
box-shadow:1px 1px 2px #999;
}
.thumbs a img:hover {height:100px; width:100px; overflow:visible; position:absolute; top:300px; left:300px;}



</style>
<!--[if IE]>
<style>
.circle{
background:transparent url(http://www.example.com/circleIE.gif) no-repeat top left;
}
.description ul a{
font-weight:normal;
}
</style>
<![endif]-->
</head>
<body>
<div id="content">
<div class="wrapper">
<div id="images" class="images">
<img id="image_about" src="http://www.example.com/1.png" alt="" width="352" height="352" style="display:block;"/>
<img id="image_portfolio" src="http://www.example.com/2.png" alt="" width="352" height="352"/>
<img id="image_contact" src="http://www.example.com/3.png" alt="" width="352" height="352" />
</div>
<div class="circleBig">
<div id="menu" class="menu">
<a id="about" class="about" href="">About me</a>
<a id="portfolio" class="portfolio" href="">Portfolio</a>
<a id="contact" class="contact" href="">Contact</a>
</div>
</div>
</div>
<div id="circle_about" class="circle">
<div class="description">
<ul>
<li><a href="#">Who I am</a></li>
<li><a href="#">What I do</a></li>
<li><a href="#">My CV</a></li>
</ul>
</div>
</div>
<div id="circle_portfolio" class="circle">
<div class="description">
<div class="thumbs">
<a href="1.jpg"><img src="1.jpg" alt=""/></a>
<a href="2.jpg"><img src="2.jpg" alt=""/></a>
<a href="3.jpg"><img src="3.jpg" alt=""/></a>
<a href="4.jpg"><img src="4.jpg" alt=""/></a>
<a href="5.jpg"><img src="5.jpg" alt=""/></a>
<a href="6.jpg"><img src="6.jpg" alt=""/></a>
<a href="7.jpg"><img src="7.jpg" alt=""/></a>
<a href="8.jpg"><img src="8.jpg" alt=""/></a>
<a href="9.jpg"><img src="9.jpg" alt=""/></a>
</div>
</div>
</div>
<div id="circle_contact" class="circle">
<div class="description">
<ul>
<li><a href="#">Email </a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Website</a></li>
</ul>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.example.com/jquery.path.js"></script>
<script type="text/javascript">
$(function() {

/* when page loads animate the about section by default */
//move($('#about'),2000,2);

$('#menu > a').mouseover(
function(){
var $this = $(this);
move($this,800,1);
}
);

/*
function to animate / show one circle.
speed is the time it takes to show the circle
turns is the turns the circle gives around the big circle
*/
function move($elem,speed,turns){
var id = $elem.attr('id');
var $circle = $('#circle_'+id);

/* if hover the same one nothing happens */
if($circle.css('opacity')==1)
return;

/* change the image */
$('#image_'+id).stop(true,true).fadeIn(650).siblings().not(this).fadeOut(650);

/*
if there's a circle already, then let's remove it:
either animate it in a circular movement or just fading out, depending on the current position of it
*/

/*
left, top
*/

$('#content .circle').each(function(i){
var $theCircle = $(this);
if($theCircle.css('opacity')==1)
$theCircle.stop()
.animate({
path : new $.path.arc({
center: [180,189],
radius: 257,
start: 65,
end : -110,
dir: -1
}),
opacity: '0'
},1500);
else
$theCircle.stop()
.animate({opacity: '0'},200);
});

/* make the circle appear in a circular movement */
var end = 65 - 360 * (turns-1);
$circle.stop()
.animate({
path : new $.path.arc({
center: [180,189],
radius: 257,
start: 180,
end: end,
dir: -1
}),
opacity: '1'
},speed);
}
});
</script>
</body>
</html>

[edited by: alt131 at 3:28 am (utc) on Oct 17, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

 

rocknbil




msg:4375565
 7:01 pm on Oct 17, 2011 (gmt 0)

eventually I plan to get the hovered state image to appear in the large circle and was thinking along the lines of;
.thumbs a img:hover {position: absoloute; top 150px; left 150px} ?


Condense your code down and you'll get more answers. :-) I really didn't look at it all - but the easiest approach here is to use the natural elements that react to "hover," anchors, and assign BG images to them.

<p><a id="some-link" href="some-link">Some Link</p>

p a { display: block; background-position: top left; background-repeat; no-repeat; text-indent:-500000px; outline: none; }
#some-link { background-image:url(/images/some-image.jpg); }
#some-link:hover { background-position: bottom left; }

That's a "Starter" idea - you'd assign pixel values to the x and y, and probably in the last selector, for sprites:

p a { display: block; background-repeat; no-repeat; text-indent:-500000px; outline: none; }
#some-link { background-image:url(/images/some-image.jpg); background-position: 200px 150px; }
#some-link:hover { background-position: 150px 150px; }

You can get image hovers to work with CSS, but may have some browser compatibility issues you won't have with anchors. Additionally, if something changes on moouseover it is presumed to be "clickable." You'll confuse your users. Use an anchor, make it clickable to somewhere, everyone's happy.

alt131




msg:4375910
 12:51 pm on Oct 18, 2011 (gmt 0)

wright67uk and welcome to css,

Having stripped out the code to test, thumbs a img:hover seems to work - assuming the images aren't 100x100 to start. Can you provide a it more detail about what you mean by "no joy"?

Paul_o_b




msg:4376156
 8:01 pm on Oct 18, 2011 (gmt 0)

Hi,

Your logic is a little flawed I'm afraid.:)


.thumbs a img:hover {
height:100px;
width:100px;
overflow:visible;
position:absolute;
top:300px;
left:300px;
}


What you are saying is that when the image is hovered you want it moved within its stacking context top:300px and left:300px. So the browser moves the image when you hover it but then the mouse cursor is no longer over the image because you moved it and therefore the hover effect disappears and the image goes away and then comes back very quickly.

Then suddenly it realises it is hovered again and goes away again.... and then comes back...and then goes away... and so on...

So all you get is a flicker.

At the same time as you move the image out of the way the space that the image occupied becomes free and all the other thumbnails fall into the gap and jiggle around until the image returns.

What you should have done is apply the thumbnail image as a background to the anchor and size the anchor to the correct width and height (using display:inline-block). Then on "anchor hover" you move the thumbnail image out of the way and enlarge it thus leaving the space preserved and the background thumbnail image showing.

You should also note that you can't just scale up a thumbnail image as it will render very badly. You have to make the image full size and instead scale it down for the thumbnail instead. Of course this means you have to have wait for images to load so is not ideal for lots of images.

Here are the basic code changes


/*
.thumbs a img:hover {
height:100px;
width:100px;
overflow:visible;
position:absolute;
top:300px;
left:300px;
}
*/
.thumbs a:hover{visibility:visible}/* old ie fix*/

/* Now move the image using the anchors hover thus keeping the mouse on the hovered element at all times */
.thumbs a:hover img{
height:100px;
width:100px;
position:absolute;
top:0;/* relative to stacking context*/
left:300px;
}

.description{position:relative}/* set stacking context for absolute element*/

.thumbs a{width:30px;height:30px;display:inline-block}



Something roughly like that.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved