Comments on: Pure CSS Image Hover http://kyleschaeffer.com/best-practices/pure-css-image-hover/ Web Design & SharePoint Branding Sat, 04 Feb 2012 09:31:25 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Mark http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3112 Mark Tue, 31 Jan 2012 19:15:48 +0000 http://www.kyleschaeffer.com/?p=142#comment-3112 Sorry, the correct URL is condor.depaul.edu/writing/ncptw2012 Sorry, the correct URL is condor.depaul.edu/writing/ncptw2012

]]> By: Mark http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3111 Mark Tue, 31 Jan 2012 19:14:52 +0000 http://www.kyleschaeffer.com/?p=142#comment-3111 Hey Kyle, Any thoughts on how to fix a hovering image that appears as a duplicate below the button? I'm having this problem on my site's nav bar where the hovering image for one of the buttons (and for some reason, just this one) pops up below the actual button. Here's my page: depaul.edu/writing/ncptw2012 Thanks for any guidance! Hey Kyle,

Any thoughts on how to fix a hovering image that appears as a duplicate below the button? I’m having this problem on my site’s nav bar where the hovering image for one of the buttons (and for some reason, just this one) pops up below the actual button.

Here’s my page:
depaul.edu/writing/ncptw2012

Thanks for any guidance!

]]> By: Pink http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3057 Pink Wed, 11 Jan 2012 16:14:52 +0000 http://www.kyleschaeffer.com/?p=142#comment-3057 I love it. It is working very fine for me. thanks a lot. I love it. It is working very fine for me. thanks a lot.

]]> By: Maxx Cooper http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3050 Maxx Cooper Tue, 10 Jan 2012 07:18:18 +0000 http://www.kyleschaeffer.com/?p=142#comment-3050 Dank je voor de handige code, daar was ik op zoek naar! Dank je voor de handige code, daar was ik op zoek naar!

]]> By: Simple CSS: Hover Over Image | Dallas TX Graphic & Web Design - Kafor Media http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3046 Simple CSS: Hover Over Image | Dallas TX Graphic & Web Design - Kafor Media Mon, 09 Jan 2012 02:46:48 +0000 http://www.kyleschaeffer.com/?p=142#comment-3046 [...] http://kyleschaeffer.com/best-practices/pure-css-image-hover/ [...] [...] http://kyleschaeffer.com/best-practices/pure-css-image-hover/ [...]

]]> By: Smita Sharma http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3034 Smita Sharma Tue, 03 Jan 2012 12:03:59 +0000 http://www.kyleschaeffer.com/?p=142#comment-3034 How to link css background image applied on hover. I have a list, on rollover i have given one image.. now i want to make it click-able. Can anyone please Help ... write me @ smita.smi@gmail.com How to link css background image applied on hover. I have a list, on rollover i have given one image.. now i want to make it click-able. Can anyone please Help … write me @ smita.smi@gmail.com

]]> By: damith wanninayake http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3031 damith wanninayake Fri, 30 Dec 2011 04:51:00 +0000 http://www.kyleschaeffer.com/?p=142#comment-3031 Thank you for your simple and brilliant code. Saved lot of my time and i was searching that technique... Thank you for your simple and brilliant code. Saved lot of my time and i was searching that technique…

]]> By: KPCTA http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3030 KPCTA Wed, 28 Dec 2011 21:53:31 +0000 http://www.kyleschaeffer.com/?p=142#comment-3030 Solved by chaging <b>display: block;</b> with <b>display: inline-block;</b> Thanks for great post : ) Solved by chaging display: block; with display: inline-block;

Thanks for great post : )

]]> By: KPCTA http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3029 KPCTA Wed, 28 Dec 2011 21:36:28 +0000 http://www.kyleschaeffer.com/?p=142#comment-3029 What is the code, to put two picture side by side. Example HTML: <a href="#" title="HiST" rel="nofollow"></a><a href="#" title="ENM" rel="nofollow"></a> CSS a.HiST {display: block; width: 149px; height: 150px; text-decoration: none; background: url("images/HiST.jpg"); } a.HiST:hover { background-position: -149px 0; } a.ENM {display: block; width: 187px; height: 150px; text-decoration: none; background: url("images/ENM.jpg"); } a.ENM:hover { background-position: -187px 0; } In this way the images one on the other positioned to the left. How to put them side by side. Thanks What is the code, to put two picture side by side.

Example
HTML:

CSS
a.HiST {display: block; width: 149px; height: 150px; text-decoration: none; background: url(“images/HiST.jpg”); }
a.HiST:hover { background-position: -149px 0; }

a.ENM {display: block; width: 187px; height: 150px; text-decoration: none; background: url(“images/ENM.jpg”); }
a.ENM:hover { background-position: -187px 0; }

In this way the images one on the other positioned to the left. How to put them side by side.

Thanks

]]> By: fiona lynne http://kyleschaeffer.com/best-practices/pure-css-image-hover/#comment-3028 fiona lynne Wed, 28 Dec 2011 20:09:53 +0000 http://www.kyleschaeffer.com/?p=142#comment-3028 Thanks! This was helpful but I had to make one change for it to work for me: changing your 0, 0 to be "top". Now it works beautifully! And I'm rather a CSS beginner so the feeling of achievement is quite big! Thanks! This was helpful but I had to make one change for it to work for me: changing your 0, 0 to be “top”. Now it works beautifully! And I’m rather a CSS beginner so the feeling of achievement is quite big!

]]>