kettle
Hey all,
I am having trouble with my hover CSS codes. The code is listed below. When I use percentiles for width and height the picture disappears so I am current forced to put the width and height in px. Can anyone tell me what I am doing wrong? The trouble is that by using px, the pictures do not shrink when the window changes size. I want to use percentiles so when the window is adjusted the size of the pictures will adjust.
.TEAM{
float: left;
margin-bottom: 10px;
width: 100%;
height: 100%;
display:block;
background:transparent url('https://db4sgowjqfwig.cloudfront.net/campaigns/121034/assets/498460/TEAM1.png') center top no-repeat;
}
.TEAM:hover {
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/121034/assets/498461/TEAM2.png');
}
Thanks,
Kettle
"The Book of Taliesan":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
Comments
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
The page I am using the code on is the main page of the site "Main Wiki Page":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page. Maybe I should not use the buttons as a background element as I did above. Does anyone have any code to create a hover effect that does not make the images background images?
Thank you,
Kettle
"Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
--Alex
Community Manager
"Dragon Age: Requiem":https://da-requiem.obsidianportal.com/
Yes I would definetly like to see the code for your button. I like how they look. Maybe I can adapt them some how. Either post it here or you can PM me.
Thanks
Kettle
"Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
First off, you'll need to set everything up to size dynamically (right now, it's all keeping a fixed size determined by its contents). To do this, you'll need to:
* Set the width of the table to 100% (so it completely fills the area of the grid)
* Set the width of each table cell to 25% (so it takes up a fourth of the grid width)
* Set the width of each a tag to 100% (so it completely fills its cell horizontally)
But this alone will result in stretching, because the vertical doesn't re-size in proportion to the horizontal. To take care of this, you'll remove the set height form your a tag, and take advantage of a quirk of the img tag: when an image tag is sized in one direction and no size is set in the other, it retains the proportions of the image within it.
In this case, within each of your a tags, simply place a square, completely transparent image. Since it's invisible, its size doesn't matter, so a 1px x 1px image like "this":http://omnichron.net/external/op/src/spacer.png is quick and easy. Then, set the width of that image to 100% so it fills the space available, and you're good to go! As the image is sized up to fill the width, its height will size up automatically, and keep things proportional.
Finally, you'll need to make the background images you've got size to their container as well, which is as simple as including background-size:contain; in your CSS for the a tag.
If you gave your table the class iconGrid, you'd use these CSS rules:
bc. .iconGrid{ width:100%; } /* Sets the width of the table to fill its container (the content area) */
.iconGrid td{ width:25%; } /* Sets each cell in the table to take up a quarter of the table's width */
.iconGrid td a{ width:100%; background-size:contain; } /* Sizes the background image in each cell to fill the cell's whole width */
.iconGrid td a img{ width:100%; } /* Sizes the spacer image in each link to fill the a tag's whole width */
And each of your a tags should now contain a spacer like so:
bc.
Let me know if any of that needs clarification. :)
Thank you all for your help.
Kettle
"Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page
As a note, you may want to use an HTML image tag directly, rather than a textile image reference to insert your spacer image - using textile automatically gives the tag a title value the same as the file name, which is why you seed the little "empty1.png" balloon if you hold over the icons currently.
Thanks an easy fix. I will definitely do that. Thanks again.
Kettle
"Rise of the Dead: Campaign of the Month June 2013":https://rise-of-the-dead.obsidianportal.com/wikis/main-page
Currently playing "The Book of Taliesin":https://the-book-of-taliesin.obsidianportal.com/wikis/main-page