Comments on: Pure CSS Image Hover

By: JJ

JJ — Mon, 30 Apr 2012 21:32:10 +0000

Wow, thread for over a year!!!
Trying to implement in a dynamic PHTML page and its not working although it works great in an HTML doc. What do I have to change to make that work, if its possible?

By: Lings

Lings — Sat, 21 Apr 2012 07:20:21 +0000

I pasted the full code, but only portion of it seems to get posted! sorry

By: Lings

Lings — Sat, 21 Apr 2012 07:18:51 +0000

Full Code is here!


.image

{

height:300px;

width:500px;

background: url(firstimage.jpg);

}
.image:hover

{

background: url(hoverimage.jpg);

}

By: Lings

Lings — Sat, 21 Apr 2012 07:17:14 +0000

Here is another simple CSS code!

Copy and paste it is sure to work. It is pure CSS. Do not forget to change the paths to your images.
You may also change the height and width of the images.

.image
{
height:300px;
width:500px;
background: url(firstimage.jpg);
}

.image:hover
{
background: url(hoverimage.jpg);
}

Have fun!

By: red

red — Fri, 20 Apr 2012 07:57:47 +0000

bebright02 – I couldn’t get it to work either but got it to work by making 2 images

.buttonLink {
display: block;
text-indent: -99999px;
width:164px;
height:56px;
background-image: url(../images/h_recruit.gif);
}
.buttonLink:hover {
background-image: url(../images/h_recruit_01.gif);
background-position: 0 0;

}

By: fysisoft

fysisoft — Sat, 14 Apr 2012 19:56:49 +0000

wow thats really great

By: Kunal

Kunal — Thu, 12 Apr 2012 09:48:59 +0000

It worked buddy thanks a lot…

By: Dorinda

Dorinda — Fri, 06 Apr 2012 03:47:31 +0000

Hi I am trying to do something very similar to what you are showing but I am stuck, I do not have one image file I actually have two. I know that jquery will do what I want but I dont know jquery and would like to do this with CSS, what I need is to have the image when selected be one image and when clicked off or not selected be another one.

I could really use the help and just dont know where to start.

Thanks in advance.
D

By: Anuncios Clasificados

Anuncios Clasificados — Sat, 31 Mar 2012 01:37:22 +0000

This effect is very simple css, but in present day uses many web pages. is something attractive and loves people. I too like the look of the effect on the web. as thanks for sharing your post. there is nothing better than a website with good design!

George

By: Joomla Developer Nepal

Joomla Developer Nepal — Tue, 27 Mar 2012 15:10:46 +0000

Thanks a lot, I am really searching for this. I need this for my new joomla based website.