How can I make a rollover image?

  • Author
    Posts
  • #1411359

    chrismhmoore
    Member

    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.

    #1411443

    mrdirby
    Member

    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.

    #1411458

    chrismhmoore
    Member

    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?

    #1411470

    mrdirby
    Member

    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.

    #1411478

    chrismhmoore
    Member

    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.

    #1411479

    mrdirby
    Member

    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.

    #1411483

    chrismhmoore
    Member

    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=”10×10″>
    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 #10×10 {
    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 #10×10 {
    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 #10×10 {
    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 #10×10 {
    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 #10×10 {
    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.

    #1411484

    mrdirby
    Member

    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/

    #1411485

    chrismhmoore
    Member

    the password is 1245

    #1411486

    chrismhmoore
    Member

    or i can just take it off… *facepalm*

    #1411487

    mrdirby
    Member

    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.

    #1411489

    chrismhmoore
    Member

    Okay, looks as tho it’s working now all but 10×10. 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?

    #1411490

    mrdirby
    Member

    I didn’t know this but id’s can’t start with numbers. So change 10×10 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;
    }
    #1411491

    chrismhmoore
    Member

    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 :)

    #1411494

    mrdirby
    Member

    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);
    #1411495

    mrdirby
    Member

    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.

    #1411497

    chrismhmoore
    Member

    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?

    #1411498

    chrismhmoore
    Member

    almost there…

    #1411499

    mrdirby
    Member

    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.

    &nbsp;

    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.

    #1411500

    chrismhmoore
    Member

    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?

The topic ‘How can I make a rollover image?’ is closed to new replies.