Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover background not working

    Hi, for this site I'm trying to have the background of the thumbnails be black when you hover over it, not just behind the titles. I can't figure out how to do it with the thumbnails being different sizes. Sorry the code is so messy!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    .post_hover:hover {
     background-color: #000;
    }
    I believe without a doctype you cannot set :hover on a non link tag in ie8.
    I would recommend using css opacity though.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    post your code here... I will try to help you

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm,
    Code:
    .post_hover:hover {
     background-color: #000;}
    Didn't work, here's the code:
    Code:
    /*** Reset ***/
    
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;background:transparent;}
    body{line-height:1;text-align:left;}
    ol,ul{list-style:none;}
    blockquote,q{quotes:none;}
    blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
    :focus {outline:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}
    
    /*** Main ***/
    
    html, body {height: 100%; }
    body {background: #fff;}
    .clear:after {content: ".";  height: 0; clear: both; visibility: hidden;}
    .left {}
    .right {}
    .wrapper {height:auto;}
    @font-face {
        font-family: 'DivisionMonoRegular';
        src: url('divisionmono-regular-webfont.eot');
        src: url('divisionmono-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('divisionmono-regular-webfont.woff') format('woff'),
             url('divisionmono-regular-webfont.ttf') format('truetype'),
             url('divisionmono-regular-webfont.svg#DivisionMonoRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    
    /*** Header ***/
    
    .header {position: fixed; right: 30px; top: 29px; z-index: 2; text-align: right; width: 160px;}
    .logo {}
    .logo a {color: #000; text-decoration: none;}
    .logo a:hover {color: #fff; background: url("http://erikcarter.net/images/linkbg.png"); margin-top: 5px; }
    .navtext {font-family: 'DivisionMonoRegular', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 48px; line-height: 38px; text-transform: uppercase;}
    .navsubtext {font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; line-height: 14px; border-top: solid 1px #000; padding-top: 3px; margin-top: 3px; float:bottom; }
    .navsubtext a:hover { padding-top: 4px; }
    #searchbox { border-top: solid 1px #000; padding-top: 3px; margin-top: 3px; width: 160px !important; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; line-height: 14px; }
    input { width: 158px !important; border: solid 1px #000; box-shadow: inset 0 0 0px; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; text-align: right; height: 14px;}  
    .sideleft { writing-mode:tb-rl; -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg); -o-transform: rotate(-90deg); white-space:nowrap; display:block; bottom:0; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; position: fixed; left: -48px; bottom: 44%;  z-index: 3;}
    .sideright { writing-mode:tb-rl; -webkit-transform:rotate(90deg);-moz-transform:rotate(90deg); -o-transform: rotate(90deg); white-space:nowrap; display:block; bottom:0; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; position: fixed; right: -26px; bottom: 44%;  z-index: 3;}
    .toptext  {top: 8px; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; z-index: 3; position: fixed; left: 46%;}
    .bottomtext  { writing-mode:tb-rl; -webkit-transform:rotate(180deg);-moz-transform:rotate(180deg); -o-transform: rotate(180deg); white-space:nowrap; display:block; bottom: 8px; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; z-index: 3; position: fixed; left: 45%;}
    .titles { margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px; z-index: 1 !important; width: 161px; position: absolute; word-wrap: break-word; left: 30px; top: 29px; text-align: left !important;  font-family: 'DivisionMonoRegular', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 48px; line-height: 38px;  text-align: left !important; text-transform: uppercase !important;}
    
    /*** Navigation ***/
    
    .nav {vertical-align: baseline;   position: relative; z-index: 100;}
    .nav li {width: 145px; height: 40px; padding: 0 0px 0px 0;}
    .nav li.current a {color: #f2f2f2;}
    .nav a {color: #000; font-size: 16px; font-weight: bold; text-decoration: none; padding-top: 0px; width: 145px;}
    .nav a:hover, .nav li.current a:hover, .jsddm_hover a, .sub-menu li a:hover {}
    li.parent a {background: url("i/folder.gif") 138px 27px no-repeat;}
    li.parent a:hover, li.jsddm_hover a {background: #000;}
    ul.sub-menu {position: absolute; visibility: hidden; z-index: 100; width: 145px; margin-top: 0px; padding: 0px 0;}
    ul.sub-menu li {margin-left: 0; height: auto; padding: 0 !important; border: none; float: none; background: none; width: 125px;}
    ul.sub-menu li a {background: none !important; font-size: 12px; padding: 0; color: #000; width: 125px;}
    
    
    /*** Content ***/
    
    .middle {
      position:absolute;
      top:1px;
      left:15px;
    }
    .container {
       position: absolute;
       /*top: 50%;
          left: 50%;
          height: 100%;*/
       top: 0;
       left: 0;
       height: 100%;
       width: 100%;
       text-align:center;
    }
    .content {
      position:relative;
      display:inline-block;
    } 
    
    
    #show { z-index: 1;}
    #show img {cursor: pointer; z-index: 1;}
    #show_nav { right: 30px; bottom: 25px; position: fixed; color: #000; font-size: 48px; font-family: 'DivisionMonoRegular'; line-height: 38px; font-weight: 100 !important; z-index: 2; padding-bottom: -3px;}
    #show_nav a { text-decoration: none; color: #000;}
    #show_nav a:hover, #show_nav .activeSlide {color: #fff; background: url("http://erikcarter.net/images/linkbg.png"); margin-top: 5px;}
    .attachment-full {}
    .back {z-index: 4; left: 30px; bottom: 25px; position: fixed; color: #000; font-size: 48px; font-family: 'DivisionMonoRegular'; line-height: 38px; font-weight: 100 !important;padding-bottom: -3px;}
    .back a { text-decoration: none; color: #000;}
    .back a:hover {color: #fff; background: url("http://erikcarter.net/images/linkbg.png"); margin-top: 5px;}
    
    .portfolioall {text-decoration: none;  text-align: left !important; top: 29px; left: 30px;  position: absolute;  padding-bottom: 0px; margin-bottom: 0px;}
    .portfolioall .post_home {}
    .portfolioall .post_home a {text-decoration: none; filter:alpha(opacity=1) !important; opacity:1 !important; }
    .portfolioall .post_home a:hover {  height: 100%; filter:alpha(opacity=1) !important; opacity:1 !important; }
    .portfolioall .thumb {z-index: 1 !important;}
    .portfolioall .thumb a:hover {background: #000; width: 160px; height: 100%; text-decoration: none; filter:alpha(opacity=1) !important; opacity:1 !important; }
    .portfolioall .thumb img {text-decoration: none; z-index: 1; }
    .portfolioall .thumb img a:hover {text-decoration: none; z-index: 1; }
    .portfolioall .thumb h2 {text-decoration: none; padding: 5px; margin-bottom: -20px !important; z-index: 3 !important; background: url("http://erikcarter.net/images/thumbg2.png") #000; background-repeat: repeat; position: relative; top: 4px; left: 0px; color: #fff; font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; line-height: 14px;}
    .portfolioall .thumb h2 a:hover {height: 100%; z-index: 1;}
    
    
    .recent h3 {font-size: 16px; font-weight: bold; color: #000; margin: 0 0 0px 0px; padding-bottom: 10px; border-bottom: 1px solid #4d4d4d;}
    
    .page_meta {height: 100px;}
    .page_meta a {color: #000; text-decoration: none;}
    .page_meta a:hover {color: #000;}
    .rss, .tags, .search {width: 160px; height: 100px;  margin-left: 15px; font-size: 11px; font-weight: bold; line-height: 85px; color: #000; border-bottom: 1px solid #4d4d4d;}
    .heading {width: 465px; height: 100px;  margin-left: 15px; font-size: 31px; font-weight: bold; line-height: 85px; color: #000; border-bottom: 1px solid #4d4d4d;}
    .tags {position: relative;}
    .tags a {background: url("i/tags.gif") 100% 50% no-repeat; padding-right: 10px;}
    .tags a:hover {}
    .taglist {margin-top: 0px; background: #333; position: absolute; left: -15px; width: 160px; padding: 15px 0 15px 15px; visibility: hidden;}
    .taglist li {line-height: 1.5;}
    .taglist li a {color: #000 !important; background: none !important; font-weight: normal; }
    .taglist li a:hover {color: #000 !important;}
    .tags .jsddm_hover a {color: #000; padding-right: 10px;}
    
    .search input {background: none; border: none; color: #000; font: bold 11px Helvetica, Arial, sans-serif; width: 160px;}
    
    .post_list, .post_single {padding: 0px 0 0px; background: url("i/post_list.gif") 0 100% no-repeat;}
    .post_single {background: none;}
    .post_list a, .post_single a {color: #000; text-decoration: none;}
    .post_list a:hover, .post_single a:hover {text-decoration: underline;}
    .post_list h2, .post_single h2, .page h2 {font-size: 26px; color: #000; font-weight: normal; margin-bottom: 0px; padding-left: 175px;}
    .page {padding-top: 0px;}
    .page h2 {padding-left: 0;}
    .post_list h2 a, .post_single h2 a, .page h2 a {color: #fff; background: #000; text-decoration: none;}
    .post_list h2 a:hover, .post_single h2 a:hover, .page h2 a:hover {color: #000; text-decoration: none;}
    .post_list_meta, .post_single_meta {width: 160px; margin-left: 0px; }
    .post_list_meta p, .post_single_meta p, .post_share {color: #000; font-size: 11px; margin-bottom: 0px; line-height: 1.7;}
    .post_date {margin-bottom: 0 !important;}
    .post_share {line-height: normal;}
    .sharelist {display: none; margin-top: 11px;}
    .sharelist li {margin-bottom: 0px;}
    
    .post_content {width: 785px; margin-left: 0px; }
    .more {margin-bottom: 0; font-weight: bold;}
    
    .post_content h1, .post_f h2, .post_content h3, .post_content h4, .post_content h5, .post_content h6 {color: #000; margin: 0px 0; font-weight: normal;}
    .post_content h1, .post_content h2 {font-size: 26px;}
    .post_content h3 {font-size: 24px;}
    .post_content h4 {font-size: 22px;}
    .post_content h5 {font-size: 20px;}
    .post_content h6 {font-size: 18px;}
    
    .post_content p {color: #000; font-size: 12px; line-height: 1.5; margin-bottom: 0px;}
    .post_content a {color: #000;}
    .post_content a:hover {text-decoration: none;}
    .post_content ul, .post_content ol {margin-bottom: 0px; padding-left: 0px;}
    .post_content li {color: #000; font-size: 12px; line-height: 1.5;}
    .post_content ul li {list-style: circle;}
    .post_content ol li {list-style: decimal;}
    .post_content blockquote {color: #000; font: italic 16px Georgia, Geneva, "Times New Roman", times; padding-left: 0px; margin: 0px 0;}
    .post_content blockquote p {color: #000; font: italic 16px Georgia, Geneva, "Times New Roman", times;}
    
    /*** Images ***/
    
    .post_content img { margin: 0; height: auto; max-width: 785px; width: auto; }
    .post_content .attachment img { max-width: 785px; }
    .post_content .alignleft, .post_content img.alignleft { margin-right: 0px; margin-top: 0px; }
    .post_content .alignright, .post_content img.alignright { float: right; margin-left: 0px; margin-top: 0px; }
    .post_content .aligncenter, .post_content img.aligncenter { clear: both; margin-left: auto; margin-right: auto; }
    .post_content img.alignleft, .post_content img.alignright, .post_content img.aligncenter { margin-bottom: 0px; }
    .post_content .wp-caption { background: #f1f1f1; line-height: 18px; margin-bottom: 0px; padding: 4px; text-align: center; }
    .post_content .wp-caption img { margin: 0px 5px 0; }
    .post_content .wp-caption p.wp-caption-text { color: #888; font-size: 12px; margin: 0px; }
    .post_content .wp-smiley { margin: 0; }
    .post_content .gallery { margin: 0 auto 0px; }
    .post_content .gallery .gallery-item { margin-top: 0; text-align: center; width: 33%; }
    .post_content .gallery img {  }
    .post_content .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 0px; }
    .post_content .gallery dl { margin: 0; }
    .post_content .gallery img {  }
    .post_content .gallery br+br {}
    .post_content .attachment img { /* single attachment images should be centered */ margin: 0 auto; }
    
    /*** Pagination ***/
    
    .pagination {padding: 0px 0 0px 0px;}
    .pagination_ctrl {height: 30px; width: 145px; background: url("i/pagination_ctrl.gif") 50% 50% no-repeat; position: relative;}
    .nextpostslink, .previouspostslink {width: 63px; height: 30px; position: absolute;}
    .nextpostslink {background: url("i/pagination_arr.gif") 100% 10px no-repeat; right: 7px;}
    .previouspostslink {background: url("i/pagination_arr.gif") 0 10px no-repeat; left: 7px;}
    .nextpostslink:hover {background-position: 100% -39px;}
    .previouspostslink:hover {background-position: 0 -39px;}
    .pagination_pages {height: 30px; line-height: 30px;  margin-left: 15px;}
    .pagination_pages a, .pagination_pages span {margin: 0 6px; padding: 5px; color: #000; text-decoration: none; font-size: 11px;}
    .pagination_pages a:hover {text-decoration: underline;}
    .pagination_pages .current {color: #000;}
    
    /*** Comments ***/
    
    .comments_heading {padding-bottom: 10px;}
    .add_comment {width: 145px; height: 25px; float: left; margin-left: 15px; font-size: 11px; border-bottom: 1px solid #4d4d4d;}
    .add_comment a {color: #000; text-decoration: none;}
    .add_comment a:hover {text-decoration: underline;}
    .comment_qty {width: 785px; height: 25px; margin-left: 15px; float: left; border-bottom: 1px solid #4d4d4d; color: #000; font-size: 12px;}
    .nopassword {color: #000; font-size: 12px; padding-left: 15px;}
    
    .comment_item {padding: 15px 0; background: url("i/post_list.gif") 0 100% no-repeat;}
    .comment_meta {float: left; width: 145px; margin-left: 15px; color: #000; font-size: 11px; line-height: 1.7;}
    .comment_meta a {color: #000; text-decoration: none; font-style: normal;}
    .comment_meta a:hover {text-decoration: underline;}
    .comment_text {width: 785px; margin-left: 15px; float: left; color: #000; font-size: 12px; line-height: 1.5;}
    
    #respond {margin-top: 30px;}
    .respond_meta {float: left; width: 145px; margin-left: 15px; color: #000; font-size: 12px; font-weight: bold;}
    .comment_form {padding-bottom: 60px; width: 785px; float: left; margin-left: 15px;}
    .comment_fields {margin-bottom: 25px;}
    #author, #email, #url {width: 225px; float: left; margin: 0 15px 0 0; padding: 0; color: #000; font-size: 12px; border: none; border-bottom: 1px solid #4d4d4d; background: none; padding-bottom: 8px; overflow: hidden;}
    #url {width: 305px; margin: 0;}
    .comment_form textarea {width: 785px; height: 125px; overflow: auto; border: none; border-bottom: 1px solid #4d4d4d; background: none; color: #000; font: 12px Helvetica, Arial, sans-serif; margin-bottom: 15px;}
    .comment_submit {text-align: right;}
    #submit {width: 170px; height: 40px; padding: 0 15px; background: #4d4d4d url("i/comment_submit.gif") 146px 17px no-repeat; border: none; text-align: left; color: #f2f2f2; font: 12px Helvetica, Arial, sans-serif; cursor: pointer;}
    #submit:hover {background: #000 url("i/comment_submit.gif") 146px -26px no-repeat; color: #4d4d4d;}
    .comment_message {color: #f2f2f2; font-size: 12px; margin-bottom: 12px;}
    .comment_message a {color: #000; text-decoration: none;}
    .comment_message a:hover {text-decoration: underline;}
    
    /*** Left column ***/
    
    .l_col {width: 162px; position: absolute; word-wrap: break-word; left: 30px; top: 29px; text-align: left !important;  z-index: 2; }
    .l_col .post_portfolio h2 {font-family: 'DivisionMonoRegular', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 48px; line-height: 38px;  text-align: left !important; text-transform: uppercase !important;}
    .l_col .post_portfolio p {}
    .l_col .post_portfolio a {text-decoration: underline; color: #000;}
    .l_col .post_portfolio a:hover {text-decoration: none;  color: #fff; background: #000; }
    .l_col .post_text {font-family: 'Old Standard TT', Helvetica, Arial, sans-serif; font-weight: 100; font-size: 13px; line-height: 14px; border-top: solid 1px #000; padding-top: 3px; margin-top: 3px; color: #000;  text-align: left !important;}
    Thanks!!!


  •  

    Posting Permissions

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