Title: Nice hover pics Last modified: August 20, 2016 --- # Nice hover pics * [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/) * Hi, * This is my (development) site, releases page. * [http://thebutterfliesareattacking.com/releases](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](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! Viewing 12 replies - 1 through 12 (of 12 total) * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2655971) * 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 🙂 * Thread Starter [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2655974) * 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 * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2655986) * :hover isn’t neccisarily a text function. let me try and put together an example. - HTTP * ```
``` - CSS * ``` div.container { height: 500px; width: 400px; } div.container:hover { background-color:#F90; } ``` * That help? 🙂 * Thread Starter [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2655998) * Brilliant, thanks 🙂 * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2655999) * 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! * Thread Starter [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656004) * 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; } } * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656010) * Looking over your code now, give me a few mins 🙂 thought id say to let you know i am working on it 😉 * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656023) * [http://pastebin.com/qMsdHrz9](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 😛 * If your not confident modifying the loop, pastebin your template file your working on and ill give it a shot. * Thread Starter [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656037) * 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](http://www.thebutterfliesareattacking.com/releases-2) * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656048) * 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 🙂 * Thread Starter [neuroplastic](https://wordpress.org/support/users/neuroplastic/) * (@neuroplastic) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656061) * 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 🙂 * [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * (@j3ddesign) * [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656065) * 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 😛 * only thing im not overly keen on was the text in the nav drop downs (hurt my head :P) * Peace out! Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘Nice hover pics’ is closed to new replies. ## Tags * [hover](https://wordpress.org/support/topic-tag/hover/) * [images](https://wordpress.org/support/topic-tag/images/) * 12 replies * 2 participants * Last reply from: [j3ddesign](https://wordpress.org/support/users/j3ddesign/) * Last activity: [14 years, 2 months ago](https://wordpress.org/support/topic/nice-hover-pics/#post-2656065) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics