BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 22 Jan 2019
Location: Texas
Status: Offline
Points: 11
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: 21 Feb 2019 at 02:28
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 - 21 Feb 2019 at 02:28
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada
Status: Offline
Points: 3947
Post Options Post Options   Thanks (1) Thanks(1)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 28 Feb 2019 at 03:25
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 - 28 Feb 2019 at 15:34
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada
Status: Offline
Points: 3947
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 28 Feb 2019 at 15:37
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: 05 Juin 2018
Location: Canada
Status: Offline
Points: 3947
Post Options Post Options   Thanks (2) Thanks(2)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 28 Feb 2019 at 16:47
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 - 28 Feb 2019 at 16:48
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,015 seconds.