Need help? Check out our Support site, then


How can I make a rollover image?

  1. On my Portfolio page, I would like to make thumbnails that rollover to expose the name of the corresponding page. How would I go about doing that?

    The blog I need help with is chrismhmoore.com.

  2. I would change from using the pre formatted tag to a specific div class for the box and an id for each different portfolio item.

    One reason to do this is to make sure that the box height and with are the same for each item and then hide the text and show a background image on hover. The second reason is to make the whole box a link.

    The html for the first and second item would look like this. I'm naming the class as portfolio-box and each id would be the name of each portfolio item.

    <a href="url">
    <div class="portfolio-box" id="akimbo">
    Akimbo
    </div>
    </a>
    
    <a href="url">
    <div class="portfolio-box" id="10x10">
    10X10 Photography Project
    </div>
    </a>

    We might need to add some text styles for the type, but we can address that later.

    Then the css would go like this.

    div.porfolio {
    border: 1px solid rgba(0,0,0,0.2);
    color: #666;
    font-family: Consolas, Monaco, Lucida Console, monospace;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8461538461;
    margin: 24px 0;
    margin: 2.4rem 0;
    overflow: auto;
    max-width: 100%;
    padding: 24px;
    padding: 2.4rem;
    min-height: 24px;
    }
    
    div.porfolio:hover #akimbo {
    background: url('background image url for akimbo');
    font-size: 0;
    }
    
    div.porfolio:hover #10x10 {
    background: url('background image url for akimbo');
    font-size: 0;
    }

    You will need to make background images for the hover state and create a hover state in your css for each portfolio item. The dimensions are 558 x 74px.

    Let me know if you have any questions this could be a little confusing.

  3. Wow thanks I can definitely take a crack at your suggestions, and you are right I do have some questions.

    1. Is all this - including the HTML - to be entered into the Customize > CSS > CSS revisions?

    2. I assume the URL to be entered within the < a ref="url"> would be the corresponding page?

    3. Lastly in this div (background: url('background image url for akimbo');) Would I enter the url of the background image I upload to my media library?

  4. You are welcome.

    1. No, you would put the html in your portfolio page. The same place you set it up originally. You can look at the html of your post by clicking the "Text" tab next to "Visual" in the top right of the editor.

    One suggestion, start this new html in a test page incase it takes a few tries to get it right and then you can copy and past the html to the proper page when it's ready. The page name doesn't matter in this situation.

    You are correct about where to put the css.

    2. Yes, I just didn't copy your links.

    3. Yes. Exactly.

  5. Okay great, I will do the test page like you mentioned and enter the HTML into the text section (should have known that), and the CSS into the CSS Revisions section.

    I will get going on this now and get back to you with any questions i may have when they arise.

  6. Great. Good luck.

    I was thinking that there might be one issue with the hover css selectors. So if they don't work try replacing

    div.porfolio:hover #akimbo

    with

    #akimbo:hover

    I just wasn't able to test the new selectors so if they work at first never mind this.

  7. Okay so I did the steps you mentioned and I am not seeing the image boxes appearing on the portfolio page. The coding is below, do you see any issues?


    <div class="portfolio-box" id="akimbo">
    Akimbo
    </div>


    <div class="portfolio-box" id="10x10">
    10X10 Photography Project
    </div>


    <div class="portfolio-box" id="csm">
    Church Street Murals
    </div>


    <div class="portfolio-box" id="mahmoud">
    Mahmoud
    </div>


    <div class="portfolio-box" id="centogene">
    Centogene
    </div>


    <div class="portfolio-box" id="westhetics">
    Westhethics
    </div>


    <div class="portfolio-box" id="george media">
    George Media Inc.
    </div>


    <div class="portfolio-box" id="rgd">
    The Association of Registered Graphic Designers
    </div>


    <div class="portfolio-box" id="sdva">
    Georgian College's School of Design & Visual Arts
    </div>


    <div class="portfolio-box" id="personal">
    Personal Work
    </div>

    div.porfolio {
    border: 1px solid rgba(0,0,0,0.2);
    color: #666;
    font-family: Consolas, Monaco, Lucida Console, monospace;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8461538461;
    margin: 24px 0;
    margin: 2.4rem 0;
    overflow: auto;
    max-width: 100%;
    padding: 24px;
    padding: 2.4rem;
    min-height: 24px;
    }

    div.porfolio:hover #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/akimbo_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #10x10 {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/10x10_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/csm_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #10x10 {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/mahmoud_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/centogene_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #10x10 {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/westhetics_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/george_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #10x10 {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/rgd_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/sdva_block.gif');
    font-size: 0;
    }

    div.porfolio:hover #10x10 {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/personal_block.gif');
    font-size: 0;
    }

    Thanks for your help I think this is going to be what Im looking for once it's up and running.

  8. can you make the page un-private? If you don't want the test page to show in the menu you can create a custom menu. Here is how to do that. http://en.support.wordpress.com/menus/

  9. the password is 1245

  10. or i can just take it off... *facepalm*

  11. So I just noticed I made some mistakes in what I originally gave you.

    Lets just update your css first. Go ahead and replace what you had before with this.

    .portfolio-box {
    border: 1px solid rgba(0,0,0,0.2);
    color: #666;
    font-family: Consolas, Monaco, Lucida Console, monospace;
    font-size: 13px;
    font-size: 1.3rem;
    line-height: 1.8461538461;
    margin: 24px 0;
    margin: 2.4rem 0;
    overflow: auto;
    max-width: 100%;
    padding: 24px;
    padding: 2.4rem;
    min-height: 24px;
    }
    
    #akimbo:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/akimbo_block.gif');
    font-size: 0;
    }
    
    #10x10:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/10x10_block.gif');
    font-size: 0;
    }
    
    #csm:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/csm_block.gif');
    font-size: 0;
    }
    
    #mahmund:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/mahmoud_block.gif');
    font-size: 0;
    }
    
    #centogene:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/centogene_block.gif');
    font-size: 0;
    }
    
    #westhetics:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/westhetics_block.gif');
    font-size: 0;
    }
    
    #george-media:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/george_block.gif');
    font-size: 0;
    }
    
    #rgd:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/rgd_block.gif');
    font-size: 0;
    }
    
    #sdva:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/sdva_block.gif');
    font-size: 0;
    }
    
    #personal:hover {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/personal_block.gif');
    font-size: 0;
    }

    The id's in the html need to match what comes after the # sign in the css. I've fixed that so this should work. Except for george media. You need to add a hyphen in between those words. No spaces allowed.

    So this should work.

  12. Okay, looks as tho it's working now all but 10x10. Im not sure why because the id matches what is after the # in the CSS?

    Also i was under the impression the thumbnails would be showing on the page then when they are hovered over the word would show up. Would that be simple to change?

  13. I didn't know this but id's can't start with numbers. So change 10x10 to tenxten or something.

    Having the images show up first is no problem. We just need to switch some of the css and create a non hover state for each id.

    In the .portfolio-box change both instances of font size to 0. You can delete one as it will be redundant.

    font-size: 0;

    Next, for each id create a non hover state with only the background. Don't delete the hover states we'll update those next. So the new akimbo would look like this. No font size and no :hover. Do this for each id.

    #akimbo {
    background: url('http://chrismhmoore.files.wordpress.com/2013/08/akimbo_block.gif');
    }

    Finally, edit the hover state of each id. We are hiding the background and showing the font.

    #akimbo:hover {
    background: none;
    font-size: 13px;
    font-size: 1.3rem;
    }
  14. Okay great!

    Turns out I did need to keep the (font-size: 0;) or the text stays on top of the thumbnail.

    Lastly I have a couple more final tweaks then I'm done taking up your time:

    1. how do i make the text centered?
    2. how do i make the text orange?
    3. how would i take the key line box out from around the thumbnails?

    Thanks for all your help :)

  15. Happy to help. This was a fun to figure out. Sorry I got the selectors wrong the first go around.

    1. Add this line to the .portfolio-box rules. You can past the line in before the closing bracket.

    text-align: center;

    2. We could do this with css but it might be better to make the text a hyperlink so while the box is now clickable when someone hovers over the text it still has the same effect that is on your current page. To do this go into the page and make each portfolio item a link to the page. That should give it the default color and rollover effect.

    3. If you want to have to box show on hover we need to remove the border rule from the .portfolio-box class and add it to each id hover state. If you don't want the box at all just delete this rule and you should be done.

    border: 1px solid rgba(0,0,0,0.2);
  16. Also when you are ready to move from the test page to portfolio, make sure you are in the text editor, and you can copy and paste the new html over the current portfolio page.

  17. Everything is looking great now... evengot a zoom in effect happening on the linked text (not sure where that came from, but i like it). One thing tho, now there is a large space between the boxes and id like them to be evenly spaced closer together like before. Not sure where this went wrong?

  18. almost there...

  19. For your reference this is what is giving you that transition effect. Ya it looks good.

    #page a {
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    transition: all .2s ease-in;
    }

    There are forced non-breaking spaces in your page code.

     

    Go through and remove all of them. You can only see them in Text view. They sometimes get added by the WordPress editor when it thinks you need a forced paragraph break.

  20. Okay so will I have to add that effect when I move everything to the portfolio page?

    I don't see the 'forced non-breaking spaces' in my code, what would I be looking for?

  21. hmm, it didn't show in the code box.

    This is what the non-breaking space is:  

  22. Nevermind, I figured it out. I will move everything over to the portfolio page now.

  23. The code keeps getting hidden in this forum.

    & nbsp;

    Except there is no space between the ampersand and the n.

  24. You won't have to add the transition effect, it is already a part of the css for the theme. :)

  25. Looks great! Glad we could get it there.

  26. Yes, I am happy with it!!

    Thanks again for your help *twothumbsup*

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.