BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Element Editor
  New Posts New Posts RSS Feed - Hover CSS Element - Image Transition
  FAQ FAQ  Forum Search   Register Register  Login Login

Hover CSS Element - Image Transition

 Post Reply Post Reply
Author
Message
Jedwardo View Drop Down
Newbie
Newbie
Avatar

Joined: Jan 22 2019
Location: Texas
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote Jedwardo Quote  Post ReplyReply Direct Link To This Post Topic: Hover CSS Element - Image Transition
    Posted: Feb 21 2019 at 1:28am
Hello All,

I'm playing with the hover element that came with the senstime template.  Was trying to use it to fade one picture into another on hover but I am having trouble configuring the element this way. Is this possible or should I explore other options?

Thanks,
Jordan


Edited by Jedwardo - Feb 21 2019 at 1:28am
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 28 2019 at 2:25am
You can try the following pure css code and see if it fulfill your needs

First add css class melting to the element

Then add the following code to your page


@keyframes melt {
from { background-image: url("Files/image/image1.jpg");} to {background-image: url("Files/image/image2.jpg");}
}

@keyframes meltback {
from { background-image: url("Files/image/image2.jpg");} to {background-image: url("Files/image/image1.jpg");}
}

.melting{
animation-name: meltback;
animation-duration: 3s;
}

.melting:hover{
animation-name: melt;
animation-duration: 3s;
animation-fill-mode: forwards;
}



Edited by Hobby001 - Feb 28 2019 at 2:34pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 28 2019 at 2:37pm
P.S.  I am not talking about the element Image on Hover from Micro Vinc but about a simple pannel from OE


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (2) Thanks(2)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Feb 28 2019 at 3:47pm
I just remberred that I used the following years ago, it's a lot easier.

Add CSS class fondu to the panel  then use the following code:


.fondu{
background-image: url("Files/image/image1.jpg");
-webkit-transition-duration: 1s; /* Safari and Chrome */ Not sure that it's required anymore
transition-duration: 1s;
}

.fondu:hover{
background-image: url("Files/image/image2.jpg");
}





Edited by Hobby001 - Feb 28 2019 at 3:48pm
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.