Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 26, 2018 at 10:37 pm #990484
    Erwin

    Hi,

    I’m trying to use a image to link to a page on my site in a LayerSlider. I’ve added a layer with html and a div in it. In the tab link.attributes I’ve added the destination-link and the class ‘outplacement’. In css I have added the following code:

    .outplacement {
	background-image: url(https://mydomain.com/avt/wp-content/uploads/2018/07/outplacement.png);
	height:34px!important;
	width:430px!important;
	background-size: cover;
    display: inline-block;
}

.outplacement:hover {
	background-image: url(https://mydomain.com/avt/wp-content/uploads/2018/07/outplacement-oldenzaal.png)!important;
}

    I would like to change the image hen hovering it, but that doesn’t work. Also the image is to big, the original image has a 34px height. It is shown a lot bigger. I’ve added the url in the private part.

    Can you help me out?

    Regards,

    Erwin

    July 27, 2018 at 2:31 pm #990723
    Victoria

    Hey Erwin,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    You might need to give a class or an id to the layer to be able to target it better.

    Best regards,
    Victoria

    July 27, 2018 at 2:45 pm #990730
    Erwin

    Hi,

    I’ve put inlog-details in the private part. Please be aware this is a public site. The slider which I’m testing in is ‘homepage copy copy’. The page is test.

    Regards,

    Erwin

    July 30, 2018 at 1:30 pm #991501
    Yigit

    Hi Erwin,

    I added additional ID “outplacement-wrap” to parent and changed your custom CSS to following

    .outplacement + a#outplacement-wrap {
	background: url(https://yourdomain.com/wp-content/uploads/2018/07/outplacement.png) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important; 
}
.outplacement {
	height:34px!important;
	width:430px!important;
    display: inline-block;
}

a#outplacement-wrap:hover {
	background: url(https://yourdomain.com/wp-content/uploads/2018/07/outplacement-oldenzaal.png)!important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

    Please review your website

    Best regards,
    Yigit

    July 31, 2018 at 9:25 am #991846
    Erwin

    Hi Yigit,
    Thank you for your response, works fine now! I suppose I can remove the class outplacement in this part?

    .outplacement + a#outplacement-wrap {
	background: url(https://yourdomain.com/wp-content/uploads/2018/07/outplacement.png) !important;
	background-repeat: no-repeat !important;
	background-size: cover !important; 
}

    Regards,
    Erwin

    August 1, 2018 at 6:44 am #992177
    Rikard

    Hi Erwin,

    If the CSS is working then please keep it as it is :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.