SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Better enlargment of images on web page

    OK, my site has a page "Supporters" that has some business card images on it. I have found out to have the card expand/enlarge and that works nicely, but...

    Is there a better way to have the enlargement make sure it is in the browser window fully? If I get some cards on the edge, they cut off the information displayed which makes some folks to send a "bug" report to the webmaster (me).

    P.S. I do NOT want to use Java/Javascript but just CSS.

    Thanks
    e

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, fredep57.

    The page that you have linked to does not show any business cards. Do you have a working page that shows an example of the "buggy" view? As I recall, the images of the cards should not be clipped along the right edge, so let's see what your code looks like with some images in it. BTW - do you know what browsers are the folks who report the problem are using?

    Edit:

    I just noticed the IE line in the head section.

    You might try changing it to:
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    otherwise, you are forcing newer versions of IE to behave like IE9.

    It's a start.
    Last edited by ronpat; Mar 19, 2014 at 20:36. Reason: Added note about IE=Edge

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    FYI: This is your original thread. Have your requirements changed?
    http://www.sitepoint.com/forums/show...ht-side-images

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,268
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    They don't render, but are these the busines cards you're talking about?
    HTML Code:
            <!-- panel with buttons -->
    		<div class="Pictures1" id="ex2">
    			<ul>
    			<li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li>
     <li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/JMGardensBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li>
     <li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/PhotoRodzBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li>
     <li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li>
     <li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li>
     <li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li>
     <li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li>  
    			</ul>
            </div>

  5. #5
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    FYI: This is your original thread. Have your requirements changed?
    http://www.sitepoint.com/forums/show...ht-side-images
    Somewhat but more of some "enhancements" is a better way of putting it. The page is working here but two things are "wrong".

    1 - IE enlarges the images about 2x more than Firefox, chrome and opera.
    2 - Images that are close to the left/right/top/bottom of the window will be cut off - enough that there are complaints and I would like to find some kind of a solution.

    So, if you click on the page link above and wait (there are about 20 images or so) you should see the card images and when hovering they expand. Hope you can see this and give me some guidance to help the issues go away.

    e

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,268
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Are you sure that link works? All I see even after waiting is
    biz-cards.jpg

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by fredep57 View Post
    Somewhat but more of some "enhancements" is a better way of putting it. The page is working here but two things are "wrong".

    1 - IE enlarges the images about 2x more than Firefox, chrome and opera.
    2 - Images that are close to the left/right/top/bottom of the window will be cut off - enough that there are complaints and I would like to find some kind of a solution.

    So, if you click on the page link above and wait (there are about 20 images or so) you should see the card images and when hovering they expand. Hope you can see this and give me some guidance to help the issues go away.

    e
    Please elaborate about the enhancements. What has been improved/changed? Yes, I can figure it out, but it would be faster if you explained.

    Which version of IE is showing the problem? Always specify the version number when describing an IE issue.

    Thanks.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    If the images are showing up as different sizes in different browsers, check the zoom settings in the browsers to assure that they are the same.

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    It's good to see that AdBlock works so effectively. That's what's keeping the images from rendering in FF.

    There are two images that are vertically aligned. They don't exactly go with the flow. It might be better to put them last.

    The reason IE (and Chrome and Opera) doubles the size of the images is most likely because of "zoom:2" in CSS. Change to "zoom:1".
    Code:
    #ex2 li:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform:scale(2);
        box-shadow:15px 15px 2px rgba(0,0,0,0.5);
        position:relative;
        background:#f2f2f2;
        -webkit-transition:transform .15s;
        -moz-transition:transform .15s;
        -ms-transition:transform .15s;
        -o-transition:transform .15s;
        transition:transform .15s;
        /* hack for ie8 and lower?? */
        zoom: 2;
    }
    FYI: the way the page is designed, the images will enlarge to within no less than about 1/8 of an inch from the right edge of the browser window. If you want the images to enlarge more than they do, several adjustments will have to be made to accommodate a larger size on :hover. It is not as simple as just setting a "zoom" number larger.

  10. #10
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,268
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    Thanks Ron. I thought AdBlock did domains not images hosted on sites. But that is indeed the cause.

    I thought it might be the non-fluidity of the nav and content forcing the cards to the right for narrow view-ports
    not-float.jpg
    But trying in Chrome, OMG, they expand to huge!

    I'm out of my depth here so I'll leave this one to others and hopefully I'll learn something.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    To enlarge the images more than 2X, change the following values:

    Code:
    #ex2 {
        margin-left:-30px;
        margin-top:-10px;  /* changed from -20px */
    }
    #ex2 ul {
        list-style:none;
        text-align:center;
        padding:72px 145px;  /* changed from 36px 98px */
        margin:0 auto;
    }
    
    and
    
    #ex2 li:hover {
        -webkit-transform: scale(2.5);  /* changed from (2) */
        -moz-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform:scale(2.5);
        box-shadow:15px 15px 2px rgba(0,0,0,0.5);
        position:relative;
        background:#f2f2f2;
        -webkit-transition:transform .15s;
        -moz-transition:transform .15s;
        -ms-transition:transform .15s;
        -o-transition:transform .15s;
        transition:transform .15s;
    /* hack for ie8 and lower?? 
        zoom: 2; */
    }
    IE8 is mostly broken. It does not support transforms and middle alignment of the rows is out of whack. Perhaps @Paul O'B can help with IE8.

    Don't neglect to change the meta tag mentioned in post #2.

  12. #12
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat,

    Thanks for this. I know that I can enlarge them more than 2x but what my issues are:

    1 - IE enlarges them much more than Firefox and/or chrome - appears around twice or more the enlarged size.
    2 - I need to make sure that IE9 is supported and the only way I can get that is with the compatibility line you say I should take out. If there is some way else, let me know please as I get a lot of complaints when I leave that out of the page from folks that still have Vista (and IE9 of course).
    3 - I need to find a way to make the enlargements center in the window so the ones that are near the edges (all around) don't get cut off.

    P.S. the site is http://www.saccc567.com and go the the Supporters menu item. If the images don't display right away, wait as I think it might take a while for 40+ images to start loading but have never done any performance testing in that area.

    e

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is caused by your use of zoom:2 which in IE9+ and in Chrome (chrome supports zoom) you will get a box that is twice the size and seeing as you have already scaled it by twice the size with transform then the total is four times the size of the original.
    Code:
    #ex2 li:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform:scale(2);
        box-shadow:15px 15px 2px rgba(0,0,0,0.5);
        position:relative;
        background:#f2f2f2;
        -webkit-transition:transform .15s;
        -moz-transition:transform .15s;
        -ms-transition:transform .15s;
        -o-transition:transform .15s;
        transition:transform .15s;
    	/* hack for ie8 and lower?? */
    	zoom: 2;		
    }
    Remove the zoom and place it in conditional comments.

    If you refer to my original you will see that the zoom was sand-boxed in conditional comments so that no other browsers are affected. It was placed there for this very reason

    Code:
    <!--[if lte IE 8]>
    <style type="text/css">
    #ex2 li:hover{zoom:2}
    </style>
    <![endif]-->
    If you follow the same procedure then you will fix ie9+ and chrome and also allow ie8 to play along with at least the zoom (although you may need to tweak positions for ie8 and under in the CCs).

    Remember that conditional comments are html and should not appear inside a stylesheet.

  14. #14
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    Thanks, this helped the zoom/enlargement. Sorry I missed the original stuff - or rather I edited somehow and lost the hack but now have it back.

    However, my real issue is that if the enlargement is close to the edges (left, right, top or bottom) then the full image is not displayed - it is cut off. Is there any CSS way to make the card stay in the display window? I have tried f few things but they don't work and since you have way more knowledge about the CSS stuff than I do maybe you can help out.

    Thanks again for the help.

    e

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by fredep57 View Post
    However, my real issue is that if the enlargement is close to the edges (left, right, top or bottom) then the full image is not displayed - it is cut off.
    Once again, in an attempt to be clear, it is the behavior of IE8 that you are concerned about. IS THAT CORRECT? Because the images are all remaining ON screen (never clipped) in other browsers including IE10.

    Frankly, IE8 isn't worth the trouble of a bunch of hacks these days. Remember that support for XP ends early next month.

  16. #16
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Once again, in an attempt to be clear, it is the behavior of IE8 that you are concerned about. IS THAT CORRECT? Because the images are all remaining ON screen (never clipped) in other browsers including IE10.
    No, I don't think hacking IE8 is what is necessary.

    Upon further investigation, it is the last/bottom images that get cut off. If you scroll to the bottom of the images and enlarge them the bottom about 30% seems to get cut off. That is what I really believe needs to be addressed since I am getting asked about why that happens - some if the sponsors want their information to be properly displayed which would include the last part of the image with their phone number and website. So, can you help me understand how to fix this?

    Thanks again
    e

  17. #17
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    In IE8, the images are anchored at the top left corner of the list item. When the images enlarge, the grow to the right and down from a little below that point. All other browsers are fine. The images in the code that I gave you in the last thread remained centered over the respective small image in IE8. Admittedly it was pretty clunky code, but it worked in all browsers including IE8. Perhaps Paul can suggest a better way to accommodate IE8.

  18. #18
    SitePoint Zealot fredep57's Avatar
    Join Date
    Aug 2009
    Location
    Pacific Northwest
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    In IE8, the images are anchored at the top left corner of the list item. When the images enlarge, the grow to the right and down from a little below that point. All other browsers are fine. The images in the code that I gave you in the last thread remained centered over the respective small image in IE8. Admittedly it was pretty clunky code, but it worked in all browsers including IE8. Perhaps Paul can suggest a better way to accommodate IE8.
    I guess I am not too clear on the IE8 thing. I am NOT concerned about IE8 and below. I do know that there are some "quirks" with IE9 but need to support IE9+ for this.

    I also am seeing that the last images displayed (bottom) are enlarging but are being cut off at their bottom because they enlarge over the smaller image - which until I was informed about this was OK by me. So I am asking if there is a way to get the bottom images to be fully visible when enlarged.

    Thanks all for your help on getting the zoom "fixed" but now need to fix the bottom image enlargement.

    e

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    How are you testing IE9?

    Have you checked the browser's window Zoom feature to see that it is zero?

    Please attach a full sized screen shot showing the clipped images.

    You have not included
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    in the head of your code. Would you please add it?

    More guesses will follow after you have explained how you are testing IE9, assured that the zoom feature is reset, and included a screen shot of the images being clipped.

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Try exactly this:
    Code:
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    Code:
    #ex2 {
        margin-left:-60px;
    }
    #ex2 ul {
        list-style:none;
        text-align:center;
        padding:40px 120px 180px;
        margin:0 auto;
    }
    If this does not render as desired, please post a screen shot showing the problem.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,618
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi fredep57.

    It looks like you are still having a problem with images being clipped at the right edge and bottom of the Supporters page.

    Here are two versions of your page. The first offers 2x enlargement on :hover. The second offers 2.5x enlargement on :hover.

    No images should be clipped in any browser. Let me know if they are.

    2x enlargement on hover:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>SACCC Supporters (2x)</title>
        <link rel="shortcut icon" type="image/x-icon" href="images/SACCC.ico">
        <style media="screen" type="text/css">
    html, body, h1, p {
        margin:0;
        padding:0;
    }
    body {
        background: url("images/saccc5bg.jpg") fixed repeat 0 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    #Wrapper {
        display:table;
        width:96%;
        margin:20px auto;   /* am assuming you wanted to center this*/
        border-top: 1px transparent solid;
    }
    #leftcol {
        width:160px;
        float:left;
    }
    #center-col {
        margin-left:160px;
    }
    #header {
        color:#000;
        margin: 0px 8% 0 5%;
        font-size: 1.1em;
        padding: 0;
        text-align: center;
        background-color: #00CC33;
        border: 1px solid green;
        vertical-align: middle;
    }
    .mainNav {
        /*    font-size: 20px;  */
        font-style: normal;
        font-weight: bold;
        font-family: Trebuchet MS, sans-serif;
        background-repeat: no-repeat;
        list-style-type: none;
        list-style-position: outside;
        text-decoration: none;
        display: inline-block;
        width: 155px;
        padding:0;
        margin:10px 0 0;
    }
    ul.mainNav li a {
        background-image: url("images/ChevySACCCr100x43.gif");
        background-repeat: no-repeat;
    /*  // 4/25/2012 added below to size the image slightly bigger??? */
        background-size: 110px;
        background-position: 50% 80%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        display: block;
        height: 42px;
        line-height: 39px;
    /*  padding: 15px 0; */
        text-align: center;
        text-decoration: none;
    }
    ul.mainNav li a:hover {
        color: red;
        /* changing from 75x33 per request */
        background-image: url("images/SACCC_BG2_100x42.gif");
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }
    #ex2 {
        margin-left:-40px;
    }
    #ex2 ul {
        list-style:none;
        text-align:center;
        padding:80px 120px 160px;
        margin:0 auto;
    }
    #ex2 li {
        display:inline-block;
        vertical-align:middle;
        margin:20px 2px;
    }
    #ex2 li img {
        display:block;
        width:180px;
    }
    #ex2 li:hover {
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform:scale(2);
        box-shadow:15px 15px 2px rgba(0,0,0,0.5);
        position:relative;
        background:#f2f2f2;
        -webkit-transition:transform .15s;
        -moz-transition:transform .15s;
        -ms-transition:transform .15s;
        -o-transition:transform .15s;
        transition:transform .15s;
    }
    
    #PageHome #nav-home,
    #PageHistory #nav-history,
    #PageOfficers #nav-officers,
    #PageSponsors #nav-sponsors,
    #supportersPage #nav-supporters,
    #PagePictures #nav-pictures,
    #PageEvents #nav-events,
    #PageNewsletter #nav-Newsletter,
    #PageLinks #nav-links {
        color: white;
        background-image: url(images/SACCC_BG2_100x42.gif);
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }
        </style>
        <!--[if lte IE 8]>
    <style type="text/css">
    #ex2 li:hover{zoom:2}
    </style>
    <![endif]-->
    <!---
       Google Analytic Code for tracking
    --->
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28020915-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    </head>
    <body id = "supportersPage">
    <div id="leftcol" style="text-align:center;">
        <p><img src="../../images/SACCC_Color.gif" alt="SACCC Logo" width="160"/></p>
        <ul class="mainNav">
            <li class="homePage">              <a id="nav-home"        href="../ccount/click.php?id=1">Home</a> </li>
            <li class="historyPage">           <a id="nav-history"     href="../ccount/click.php?id=3">History</a></li>
            <li class="supportersPage">        <a id="nav-supporters"  href="../ccount/click.php?id=12">Supporters</a> </li>
            <li class="sponsorPage">           <a id="nav-sponsors"    href="../ccount/click.php?id=4">Sponsors</a> </li>
            <li class="picturePage">           <a id="nav-pictures"    href="../ccount/click.php?id=2">Pictures</a> </li>
            <li class="eventPage">             <a id="nav-events"      href="../ccount/click.php?id=5">Events</a> </li>
            <li class="newsletterPage">        <a id="nav-Newsletter"  href="../ccount/click.php?id=6">Newsletter</a></li>
            <li class="linksPage">             <a id="nav-links"       href="../ccount/click.php?id=7">Links</a> </li>
            <li class="officersPage">          <a id="nav-officers"    href="../ccount/click.php?id=10">Officers</a> </li>
    <!--     <li class="CarShowInfo">   <a id="nav-ShowInfo"    href="../ccount/click.php?id=8">Show Info</a> </li>  -->
            <li class="CarShowInfo">           <a id="nav-ShowInfo"    href="../ccount/click.php?id=11">Show Info</a> </li>
        </ul>
    </div>
    <!-- end left column -->
    <div id="center-col">
        <div id="header">
            <h1 class="SACCCWelcome">Spokane Area Classic Chevy Club</h1>
            <h1 class="SACCCWelcome">Supporters</h1>
            <div class="Mission">
                <p>The following are businesses and individuals that<br>help support our club<br><br>
                <span style="font-size=.7em">Please visit these supporters<br>and remember to mention you saw their ad at<br>
                SPOKANE AREA CLASSIC CHEVY CLUB website!</span></p>
            </div>
        </div>
    <!-- panel with buttons -->
        <div class="Pictures1" id="ex2">
            <ul>
                <li><img src="SpecialPictures/Advertisers/TexasRoadhouseBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li> <li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li> <li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PhotRodzBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li> <li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li> <li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li> <li><img src="SpecialPictures/Advertisers/JM GardenBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li> <li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    2.5x enlargement on hover:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <title>SACCC Supporters (2.5x)</title>
        <link rel="shortcut icon" type="image/x-icon" href="images/SACCC.ico">
        <style media="screen" type="text/css">
    html, body, h1, p {
        margin:0;
        padding:0;
    }
    body {
        background: url("images/saccc5bg.jpg") fixed repeat 0 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    #Wrapper {
        display:table;
        width:96%;
        margin:20px auto;   /* am assuming you wanted to center this*/
        border-top: 1px transparent solid;
    }
    #leftcol {
        width:160px;
        float:left;
    }
    #center-col {
        margin-left:160px;
    }
    #header {
        color:#000;
        margin: 0px 8% 0 5%;
        font-size: 1.1em;
        padding: 0;
        text-align: center;
        background-color: #00CC33;
        border: 1px solid green;
        vertical-align: middle;
    }
    .mainNav {
        /*    font-size: 20px;  */
        font-style: normal;
        font-weight: bold;
        font-family: Trebuchet MS, sans-serif;
        background-repeat: no-repeat;
        list-style-type: none;
        list-style-position: outside;
        text-decoration: none;
        display: inline-block;
        width: 155px;
        padding:0;
        margin:10px 0 0;
    }
    ul.mainNav li a {
        background-image: url("images/ChevySACCCr100x43.gif");
        background-repeat: no-repeat;
    /*  // 4/25/2012 added below to size the image slightly bigger??? */
        background-size: 110px;
        background-position: 50% 80%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        display: block;
        height: 42px;
        line-height: 39px;
    /*  padding: 15px 0; */
        text-align: center;
        text-decoration: none;
    }
    ul.mainNav li a:hover {
        color: red;
        /* changing from 75x33 per request */
        background-image: url("images/SACCC_BG2_100x42.gif");
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }
    #ex2 {
        margin-left:-60px;
    }
    #ex2 ul {
        list-style:none;
        text-align:center;
        padding:80px 180px 240px;
        margin:0 auto;
    }
    #ex2 li {
        display:inline-block;
        vertical-align:middle;
        margin:20px 2px;
    }
    #ex2 li img {
        display:block;
        width:180px;
    }
    #ex2 li:hover {
        -webkit-transform: scale(2.5);
        -moz-transform: scale(2.5);
        -ms-transform: scale(2.5);
        -o-transform: scale(2.5);
        transform:scale(2.5);
        box-shadow:15px 15px 2px rgba(0,0,0,0.5);
        position:relative;
        background:#f2f2f2;
        -webkit-transition:transform .15s;
        -moz-transition:transform .15s;
        -ms-transition:transform .15s;
        -o-transition:transform .15s;
        transition:transform .15s;
    }
    
    #PageHome #nav-home,
    #PageHistory #nav-history,
    #PageOfficers #nav-officers,
    #PageSponsors #nav-sponsors,
    #supportersPage #nav-supporters,
    #PagePictures #nav-pictures,
    #PageEvents #nav-events,
    #PageNewsletter #nav-Newsletter,
    #PageLinks #nav-links {
        color: white;
        background-image: url(images/SACCC_BG2_100x42.gif);
        background-repeat: no-repeat;
        background-position: 50% 80%;
    }
        </style>
        <!--[if lte IE 8]>
    <style type="text/css">
    #ex2 li:hover{zoom:2}
    </style>
    <![endif]-->
    <!---
       Google Analytic Code for tracking
    --->
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-28020915-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    </head>
    <body id = "supportersPage">
    <div id="leftcol" style="text-align:center;">
        <p><img src="../../images/SACCC_Color.gif" alt="SACCC Logo" width="160"/></p>
        <ul class="mainNav">
            <li class="homePage">              <a id="nav-home"        href="../ccount/click.php?id=1">Home</a> </li>
            <li class="historyPage">           <a id="nav-history"     href="../ccount/click.php?id=3">History</a></li>
            <li class="supportersPage">        <a id="nav-supporters"  href="../ccount/click.php?id=12">Supporters</a> </li>
            <li class="sponsorPage">           <a id="nav-sponsors"    href="../ccount/click.php?id=4">Sponsors</a> </li>
            <li class="picturePage">           <a id="nav-pictures"    href="../ccount/click.php?id=2">Pictures</a> </li>
            <li class="eventPage">             <a id="nav-events"      href="../ccount/click.php?id=5">Events</a> </li>
            <li class="newsletterPage">        <a id="nav-Newsletter"  href="../ccount/click.php?id=6">Newsletter</a></li>
            <li class="linksPage">             <a id="nav-links"       href="../ccount/click.php?id=7">Links</a> </li>
            <li class="officersPage">          <a id="nav-officers"    href="../ccount/click.php?id=10">Officers</a> </li>
    <!--     <li class="CarShowInfo">   <a id="nav-ShowInfo"    href="../ccount/click.php?id=8">Show Info</a> </li>  -->
            <li class="CarShowInfo">           <a id="nav-ShowInfo"    href="../ccount/click.php?id=11">Show Info</a> </li>
        </ul>
    </div>
    <!-- end left column -->
    <div id="center-col">
        <div id="header">
            <h1 class="SACCCWelcome">Spokane Area Classic Chevy Club</h1>
            <h1 class="SACCCWelcome">Supporters</h1>
            <div class="Mission">
                <p>The following are businesses and individuals that<br>help support our club<br><br>
                <span style="font-size=.7em">Please visit these supporters<br>and remember to mention you saw their ad at<br>
                SPOKANE AREA CLASSIC CHEVY CLUB website!</span></p>
            </div>
        </div>
    <!-- panel with buttons -->
        <div class="Pictures1" id="ex2">
            <ul>
                <li><img src="SpecialPictures/Advertisers/TexasRoadhouseBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BarberJoesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NAPAFrancisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PMAutoSalesBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/AmericanWayAutoBodBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TonysSteerInn_1.png" ></li> <li><img src="SpecialPictures/Advertisers/FlashsAutBodyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MAACOSpokaneValleyBC.png" ></li> <li><img src="SpecialPictures/Advertisers/JimsHomeBrewBC.png" ></li> <li><img src="SpecialPictures/Advertisers/VHUpholsteryBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PhotRodzBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DSM Camaro Group.png" ></li> <li><img src="SpecialPictures/Advertisers/McguiarsCarCarBC.jpg" ></li> <li><img src="SpecialPictures/Advertisers/HomeEnvironmentsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LibertyTireProsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LegacyVehicleAppraisalBC.png" ></li> <li><img src="SpecialPictures/Advertisers/NorthwestPizzaSlicesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/TobysBatterAndAutoElectricBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BottlesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MasterBlastersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CorkysRadiatorBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoNation.png" ></li> <li><img src="SpecialPictures/Advertisers/DonutParadBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneMetalFinishingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/IllinoisAveBarAndGrillBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AAASpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DarcysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/CathayInnBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LesSchwaNDivixionBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneFallsInsuranceBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ShakeysBC.png" ></li> <li><img src="SpecialPictures/Advertisers/MickelDeansIceCreamBC.png" ></li> <li><img src="SpecialPictures/Advertisers/BronzedBeanBC.png" ></li> <li><img src="SpecialPictures/Advertisers/LuigisBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FarmersInsToriDaleboutBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SaturdayNightIncBC.png" ></li> <li><img src="SpecialPictures/Advertisers/DennysArgonneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/OReillyAutoPartsBC.png" ></li> <li><img src="SpecialPictures/Advertisers/WilliamsAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Skippers Card.png" ></li> <li><img src="SpecialPictures/Advertisers/JM GardenBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AmericanTireDepotBC.png" ></li> <li><img src="SpecialPictures/Advertisers/PerformanceAutoSalesBC.png" ></li> <li><img src="SpecialPictures/Advertisers/ProAutomotiveBC.png" ></li> <li><img src="SpecialPictures/Advertisers/HillyardTireCenterBC.png" ></li> <li><img src="SpecialPictures/Advertisers/AutoZoneSpokaneBC.png" ></li> <li><img src="SpecialPictures/Advertisers/Kalispel_NQC_BC.png" ></li> <li><img src="SpecialPictures/Advertisers/RAMAXEngravingBC.png" ></li> <li><img src="SpecialPictures/Advertisers/SpokaneToppersBC.png" ></li> <li><img src="SpecialPictures/Advertisers/FeltmanGebhardtGreerZeimantzBC.png" ></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    PS: I think a box shadow around the entire image would look better than the offset box shadow currently in use. The tops of the cards would be visually separated from the cards around them. As it is, sometimes they tend to run together on the top and left.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •