Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 20, 2015 at 11:49 pm #540002
    parax-germany

    Hello,

    I have got a problem with webkit-transform when adressing an ID (given in layerslider; e.g. picthover). The following code does not work (the image switches instantanious and does not fade):

    #picthover{

    -webkit-transition: all 2s ease; /* Safari and Chrome */
    -moz-transition: all 2s ease; /* Firefox */
    -ms-transition: all 2s ease; /* IE 9 */
    -o-transition: all 2s ease; /* Opera */
    transition: all 2s ease;
	opacity: 0;
}
#picthover:hover {
opacity:1;
}

    When I directly adress the image, without yousing an ID, the code works perfectly fine: 

    #layerslider_9_1 > div.ls-inner > div > img:nth-child(4){
    -webkit-transition: all 2s ease; /* Safari and Chrome */
    -moz-transition: all 2s ease; /* Firefox */
    -ms-transition: all 2s ease; /* IE 9 */
    -o-transition: all 2s ease; /* Opera */
    transition: all 2s ease;
	opacity: 0;
}
#layerslider_9_1 > div.ls-inner > div > img:nth-child(4):hover {
opacity:1;
}

    Do you have any idea where the mistake could be?
    Thanks a lot

    November 22, 2015 at 4:46 am #540305
    parax-germany

    It also works if I give all elements of slider a transition:

    #layerslider_4_1  div.ls-inner div.ls-slide.ls-active a img {
		-webkit-transition: all 0.4s ease; /* Safari and Chrome */
		-moz-transition: all 0.4s ease; /* Firefox */
		-ms-transition: all 0.4s ease; /* IE 9 */
		-o-transition: all 0.4s ease; /* Opera */
		transition: all 0.4s ease;
		}

    and afterwards use the id’s, from the elements of the slider, to give spicific effects:

    #kicklink:hover {
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		transform: scale(1.2);
		}

    Again, I don’t know why. Would be glad for any help.

    Thanks in advance

    November 23, 2015 at 8:44 am #540562
    Rikard

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 23, 2015 at 11:45 am #540643
    parax-germany

    Here are the accounts

    November 26, 2015 at 3:25 am #542819
    Ismael

    Hey!

    Why do you need to add the css codes manually? There is a scale option in the layer’s transition panel.

    Best regards,
    Ismael

    November 26, 2015 at 12:03 pm #543024
    parax-germany

    Hi,

    and thanks for the answer. I want to scale only on hover (like in the code above), is that also possible in layerslider?

    Best regards,

    Fridolin

    December 1, 2015 at 2:49 am #544941
    Ismael

    Hi!

    I see. I didn’t notice the hover selector. I would like to access the site but the authentication details are not working. Please check. Did you add a unique id or class to the layer? You can do that in the Attributes panel.

    Regards,
    Ismael

    December 1, 2015 at 10:06 pm #545617
    parax-germany

    Hey,
    I think I solved the Problem using some #top’s and important’s. I think the layerslider uses the Webkit command, so you have to overwrite it.

    Thanks

    Fridolin

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Webkit-transform doesn't work in layerslider’ is closed to new replies.