CODEWITHSUNDEEP
cssimage
Lee Jackson
Lee Jackson

Reputation: 209

Changing images on hover with CSS

I can't seem to figure this out. I want to have a system whereby an image will change to another image upon hover over.

In my html I have:

<div class="linkyimage">
<img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png"></p>
</div>

And then in my css:

.linkyimage{
    position: relative;
    height: 250px;
    width:250px:    
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px:
    visibility: hidden;
    opacity: 0;
}

.linkyimage:hover .hovvery {
    visibility: visible;
    opacity:1;
}

Yet nothing seems to happen for me. Where am I going wrong?

edit:

Still can't seem to get any effect.....

.linkyimage{
    position: relative;
    height: 250px;
    width:250px; 
}   

.hovvery{
    position: absolute;
    height: 250px;
    width:250px;
  visibility: hidden;
  opacity: 0;
    }

.linkyimage:hover .hovvery{
    visibility: visible;
    opacity:1;
    }

and html:

<div id="content">

    <div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>

    <img src="image/yellow.png">
    <img src="image/lblue.png">
    <img src="image/green.png">
    <img src="image/brown.png">

    <div class"linkyimage">
    <img src="image/dblue.png" alt"blue" />
    <p class="hovvery"<img src="image/black.png" /></p>
    </div>
</div>

I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!

Upvotes: 0

Views: 352

Answers (1)

user1823761
user1823761

Reputation:

Working FIDDLE Demo

You didn't close p in this line:

<p class="hovvery"<img src="image/black.png"></p>

Correct code:

<div class="linkyimage">
    <img src="image/red.png" alt="red" />
    <p class="hovvery"><img src="image/black.png" /></p>
</div>

Also you have syntax error in your CSS here:

width:250px: /* it must be semicolon ; at the end */

Change it to this:

width: 250px;

Upvotes: 4

Related Questions