Thread: Learning Css

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0

    Learning Css


    Hello I'm new to css i am try to do some rollover pictures But i'm haveing a problem centering the image on the mouse hover

    here is a link to the site
    http://bob.lickmy9.com/css2/

    and a copy of the css code
    Code:
    @charset "utf-8"; /* CSS Document for Nebraska Marine Service */ body { margin: 0; padding: 0; background:url(../images/site-bg.jpg) left top repeat-x #e8e8e8; font-family: Arial, Georgia, Geneva, Verdana, sans-serif; } .logo { font-weight: bold; font-size: 38px; color: #3297CA; text-shadow: #858585 2px 2px 1px; padding: 10px; } .main{ width: 825px; background-color: white; margin: 10px auto; position: middle; padding-top: 20px; padding-bottom: 20px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -o-border-radius: 50px; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .service-box { float: left; width: 375px; background-color:#CCCCFF; margin-left:9px; margin-top:9px; margin-bottom:9px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .service-text{ padding-left:1em; padding-top:1em; padding-bottom:1em; } .contact-box { float: left; width: 275px; background-color:#e8e8e8; margin-left:9px; margin-top:9px; margin-bottom:9px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .footer-text { text-align: center; Font-size: 10px; } .gallery-box { float: left; width: 775px; background-color:#240A66; margin-left:9px; margin-top:9px; margin-bottom:9px; color: white; text-align: center; font-weight: bold; font-size: 12px; color: white; text-shadow: #858585 2px 2px 1px; padding: 10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); } .gallery-images img { margin: 5px 5px 5px 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); box-shadow: 0px 1px 3px rgba(0,0,0,0.5); } /* Set general thumbnail styles */ #col-1 /*{ position: absolute; top: 0; left: 0; } /*place the column on the page*/ li { margin: 10px; list-style-type:none; } /*remove bullets from the list elements*/ img { border: none; } /*set images to have no borders*/ /* MouseOut state (default) - create and position a space for the larger images and hide them*/ #col-1 a img.hid { width: 700px; height:470px; position: absolute; top: 10px; left: 282px; text-align:center; visibility: hidden; } /* MouseOver state (hover)- reveal larger picture */ #col-1 a:hover { background: black; } #col-1 a:hover img.hid { visibility:visible; }
    Thank you for any help
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    2
    Rep Power
    0

    css code


    .gallery-images img {
    margin: 5px 5px 5px 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
    }



    /* Set general thumbnail styles */
    #col-1 /*{ position: absolute; top: 0; left: 0; } /*place the column on the page*/
    li { margin: 10px; list-style-type:none; } /*remove bullets from the list elements*/
    img { border: none; } /*set images to have no borders*/

    /* MouseOut state (default) - create and position a space for the larger images and hide them*/
    #col-1 a img.hid { width: 700px; height:470px;
    position: absolute; top: 10px; left: 282px;
    text-align:center;
    visibility: hidden;
    }

    /* MouseOver state (hover)- reveal larger picture */
    #col-1 a:hover { background: black; }
    #col-1 a:hover img.hid { visibility:visible; }

IMN logo majestic logo threadwatch logo seochat tools logo