WordPress.org

Ready to get started?Download WordPress

Forums

Nice hover pics (13 posts)

  1. neuroplastic
    Member
    Posted 2 years ago #

    Hi,

    This is my (development) site, releases page.

    http://thebutterfliesareattacking.com/releases

    Now this hover effect is very clumsily done, using 2 photos from photoshop plus white space on the left because the hover plugin doesn't support centring of images.

    What I really want is this hover effect, done with nice clean code:

    http://wpshower.com/demo/?theme=imbalance2

    But without comments or tags, just the image. I'm using the dionysus theme and would like to integrate this option: a gallery kind of thing with nice hover effects like in the demo above. Can't figure out how on earth to do it. If anyone could enlighten me, that would be great.

    Thanks!

  2. j3ddesign
    Member
    Posted 2 years ago #

    It's all in the CSS with the :hover attribute assigned to the area you want modifying on hover.

    for example:

    a {
    color:#FFFFFF;
    text-decoration:none;
    }
    a:hover {
    text-decoration: underline;
    }

    this example would simply underline the text for the nav on hover.
    this can be done for anything :)

  3. neuroplastic
    Member
    Posted 2 years ago #

    Yes, this i know, but what i want is for the picture to be hovered over and an orange box to appear around it, as in the link above. It's not a text issue. But thanks anyway

  4. j3ddesign
    Member
    Posted 2 years ago #

    :hover isn't neccisarily a text function. let me try and put together an example.

      HTTP
    <div class="container">
    	<img src="http://www.flasherize.com/images/wordpress_logo.png" />
    </div>
      CSS
    div.container {
    	height: 500px;
    	width: 400px;
    }
    div.container:hover {
    	background-color:#F90;
    }

    That help? :)

  5. neuroplastic
    Member
    Posted 2 years ago #

    Brilliant, thanks :-)

  6. j3ddesign
    Member
    Posted 2 years ago #

    your welcome.
    I had a look at how they had done it and it seems to be a really bizarre way of going about it when you can just use a simple tag :)

    glad I could help!

  7. neuroplastic
    Member
    Posted 2 years ago #

    yeah, it was weird, haha. it started with hover pics and became something much more ugly. do you know how i could get them to be in a nice neat row without losing their center position in the container? i tried [gallery] shortcode but it just removed the images from the post entirely.

    also, separate but not really. say i wanted to apply the container to text as well (see the text at the bottom of the page). how would i change the font colour within the container? tried to do it in css but it wasn't having any of it. i did this.

    div.container2 {
    height: 17px;
    width: 120px;
    background-color:#08545f;
    font-color:#00000;
    padding: 10px 20px 10px 10px;
    }
    div.container2:hover {
    background-color:#Ff9900;
    font-color:#fffff;
    }
    }

  8. j3ddesign
    Member
    Posted 2 years ago #

    Looking over your code now, give me a few mins :)
    thought id say to let you know i am working on it ;)

  9. j3ddesign
    Member
    Posted 2 years ago #

    http://pastebin.com/qMsdHrz9

    Have a look at that.
    what that does is a horizontal scrolling div with all images set to float left, with no wrapping, meaning they will continue to go left the more you add.

    Modify your loop around this and your set (this also means you dont need those white spaces around your images now too)

    Sorry for the wait btw, ran into a few issues getting it to work :P

    If your not confident modifying the loop, pastebin your template file your working on and ill give it a shot.

  10. neuroplastic
    Member
    Posted 2 years ago #

    Thanks! I actually found a more easy solution, which is to put all the images into a table. Easy you'd think, but there's something that's driving me nuts. Every alternate row is a nasty shade of cream instead of white. I went into the CSS to edit the thead colour, changed it to FFFFFF and still it's cream, so something somewhere must be overriding it, but i have no idea what.

    Ignore the bottom few rows and the fact that the pics are all the same!

    http://www.thebutterfliesareattacking.com/releases-2

  11. j3ddesign
    Member
    Posted 2 years ago #

    thats one thing i hate about tables. they're a nightmare to work with in styling.
    I didnt realise thats how you wanted the pics to go. if you want that, literally just a "float:left" will do that ;)

    I've worked out my issue now, so happy to help you with yours as much as poss. if you send me the code for that page, id be happy to clean it up a lil and get it working :)

  12. neuroplastic
    Member
    Posted 2 years ago #

    I like the table though because it allows me to have the images centred if there aren't 4 of them, if you see what i mean, and float won't allow that. Once i get rid of that cream colour, it'll be perfect.

    Thanks so much for your help, I really appreciate it. I might make a new topic if tables aren't really your thing :-)

  13. j3ddesign
    Member
    Posted 2 years ago #

    haha no worries, divs have outdated tables now imo :) you can do all the styling you like with divs.
    the centering thing would all be on the container width ;)

    but if you want to use tables then fair enough :) good luck to you buddy!
    btw, love the rest of your site, had a listen to some of the tunes too :P

    only thing im not overly keen on was the text in the nav drop downs (hurt my head :P)

    Peace out!

Topic Closed

This topic has been closed to new replies.

About this Topic