klotho Posted September 4, 2011 Share Posted September 4, 2011 Hope I have posted this in the correct topic...Hi, I'm making a portfolio layout with images in a list (grid view), and I’m working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I’m showing full width, but when I’m resizing the browser window the img thumbs floats down an leave a gap on the right side (the <li> is set to float:left; ) (as well as it should). But this is not the effect I’m after, I want the img thumbs to resize with the browser window, and I have managed to do that width CSS (example: width: 28.1%; ). But I want a hover effect with text over the images (and that makes a mess out of % ), so now I’m looking for a script that can do the resizing for me because I can't use % on the image if I want that effect; and that I DO!So do anybody knows about a script that can help me with my problem?Specifics:I'm no wizard in .js so it would be fine if it is well documented on how to implement :PIt should be possible to direct to only img with a certain class (don't want all my images to go bananas when resizing )Maybe control image size in css?And of course keep correct image dimensions! I'm not sure if this matters but; this portfolio is going to be implemented in WordPress.I would bee very grateful for all help and tips on the matter, because this problem makes me kinda crazy !Also:I come over this gallery when I was searching after a solution, so here you can see an example on what I want (it also almost have the hover effect I want in mine), resize your browser window and see the effect: http://bestwebgallery.com/ I hope I have explained what I’m after clearly enough, my English (writing) is sadly not the best.Kind regards from a designer who isn’t crazy; yet! Link to comment Share on other sites More sharing options...
ApocalypeX Posted September 4, 2011 Share Posted September 4, 2011 Hope I have posted this in the correct topic...Hi, I'm making a portfolio layout with images in a list (grid view), and I’m working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I’m showing full width, but when I’m resizing the browser window the img thumbs floats down an leave a gap on the right side (the <li> is set to float:left; ) (as well as it should). But this is not the effect I’m after, I want the img thumbs to resize with the browser window, and I have managed to do that width CSS (example: width: 28.1%; ). But I want a hover effect with text over the images (and that makes a mess out of % ), so now I’m looking for a script that can do the resizing for me because I can't use % on the image if I want that effect; and that I DO!So do anybody knows about a script that can help me with my problem?Specifics:I'm no wizard in .js so it would be fine if it is well documented on how to implement :PIt should be possible to direct to only img with a certain class (don't want all my images to go bananas when resizing )Maybe control image size in css?And of course keep correct image dimensions! I'm not sure if this matters but; this portfolio is going to be implemented in WordPress.I would bee very grateful for all help and tips on the matter, because this problem makes me kinda crazy !Also:I come over this gallery when I was searching after a solution, so here you can see an example on what I want (it also almost have the hover effect I want in mine), resize your browser window and see the effect: http://bestwebgallery.com/ I hope I have explained what I’m after clearly enough, my English (writing) is sadly not the best.Kind regards from a designer who isn’t crazy; yet!Set minimal sizes for your elements and then you wont have a problem when the screen is resized too much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.