change a photo on hover

Etienne

Hello,

is someone know if it's possible to change the photo on hover :

Example :
- Add a single photo block (and get the SM-id)
- and the photo change when mouse hover the photo

I tried with CSS code :

.sm-page-widget-"Id-SM":hover {

content: url('newphoto'); /* or background-image: url("newphoto"); */

width: 192px; /* Width of new and old image */
height: 128px;
}

But no results or the background is behind the original photos which not disapears .

Thanks

Etienne

Hikin' Mike

This should work:

.sm-page-widget-"Id-SM" {
    background-image: url("Old-Photo"); 
    }        
        
.sm-page-widget-"Id-SM":hover {
    background-image: url("New-Photo"); 
    }

Hikin' Mike

A working model: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Photo-on-Hover

NicRacine

I am looking to display text on hover over a picture. Would that work as well?

It could either be displayed over the picture or beside it.

Thanks!

Etienne

Yes, it's a solution.

I tried with the .sm-page-widget-"Id-SM" but not work, perhaps because it's a photo Block.

But it runs with code in your link with a HTML/CSS Block

I use :

--------------------------------------------------------
HTML
-------

CSS
-------
/* Change Photo on Hover */
.hover-photo{
width: 400px;
height: 267px;
background-image: url('test1');
}

.hover-photo:hover {
background-image: url('test2');
}


--------------------------------------------------------

It runs well.

Thanks

Etienne

ChancyRat

Hikin' Mike wrote: »

A working model: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Photo-on-Hover

Interesting example, Mike!
It would be neat to crop the two photos so that they overlay exactly the same.

Hikin' Mike

ChancyRat wrote: »

Interesting example, Mike!
It would be neat to crop the two photos so that they overlay exactly the same.

I do have 3 versions (taken later) of the second shot, I just don't have it loaded on SM. I guess I can load it just for this example.

Hikin' Mike

Etienne wrote: »

Yes, it's a solution.

I tried with the .sm-page-widget-"Id-SM" but not work, perhaps because it's a photo Block.

But it runs with code in your link with a HTML/CSS Block

I use :

---

HTML

---

<a href="src1">
<div class="hover-photo">
</div>
</a>

CSS

---

/* Change Photo on Hover */
.hover-photo{
width: 400px;
height: 267px;
background-image: url('test1');
}

.hover-photo:hover {
background-image: url('test2');
}

---

It runs well.

Thanks

Etienne

Yes, I realized it after the fact that probably wasn't going to work. I went ahead a tried something different and posted the live example. I should have removed the first comment.

Hikin' Mike

NicRacine wrote: »

I am looking to display text on hover over a picture. Would that work as well?

It could either be displayed over the picture or beside it.

Thanks!

Like this: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Display-Text-Photo-Hover

NicRacine

Hikin' Mike wrote: »

Like this: http://gallery.imagesinthebackcountry.com/Smugmug-customization/Display-Text-Photo-Hover

That's basically it.

I'll play with the code to try and get what I want.

Thanks!