Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 23, 2017 at 1:16 am #867383
    tweetgeeb

    Hello,
    Trying to customise the image from the hover arrow to the LinkedIn icon on the team profile images. I have tried the below CSS, however, this applies it to all images with hover. I only want to enable the customisation to the TEAM images.

    Hoping you can help.

    Thanks,

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: ”;
    background-image: url(http://www.dawsonbrothers.com.au/staging/wp-content/uploads/2017/10/linkedIn.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    }

    October 23, 2017 at 7:26 am #867474
    Rikard

    Hey tweetgeeb,

    Please try this instead:

    .page-id-46 #team- .image-overlay.overlay-type-extern .image-overlay-inside:before {
content: ”;
background-image: url(https://www.dawsonbrothers.com.au/staging/wp-content/uploads/2017/10/linkedIn.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
}

    Best regards,
    Rikard

    October 23, 2017 at 8:18 am #867479
    tweetgeeb

    Thanks Richard. It has worked, but I can see the arrow underneath the LinkedIn icon. you can just see the tip and tail of the arrow poking out. How can I remove the arrow altogether?

    October 23, 2017 at 12:51 pm #867594
    tweetgeeb

    I also seem to have some post dates visible on the iPad view (only) within the footers’ first column. Can you pls advise how to remove this.

    Thank you,

    October 23, 2017 at 8:28 pm #867821
    Basilis

    Hi,

    also add

    content: none !important;

    and the arrow should be removed

    Best regards,
    Basilis

    October 24, 2017 at 3:50 am #867945
    tweetgeeb

    Hi thanks – no luck though, this removes both the arrow and the LinkedIn icon.

    .page-id-46 #team- .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: none !important;
    background-image: url(http://www.dawsonbrothers.com.au/staging/wp-content/uploads/2017/10/linkedIn.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    }

    October 24, 2017 at 2:40 pm #868218
    tweetgeeb

    Hoping you are able to shed some light on how to remove the arrow underneath the LinkedIn icon.

    Thank you,

    October 25, 2017 at 7:40 pm #868916
    Yigit

    Hi,

    Sorry for the late reply!
    Have you figured it out already? If not, can you please post a screenshot and show the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    October 28, 2017 at 1:08 pm #869889
    tweetgeeb

    Hi, no sorry. I haven’t been able to resolve. Screengrab via DB https://www.dropbox.com/s/r3f8j1kvbe4pada/enfold%20support%20-%20roll%20over.JPG?dl=0 but not too sure how this will show you as you won’t be able to see the rollover in action. I provided login details with the original thread. Can you access and take a look?

    I was also wondering why on iPad view post dates seem to show up in the footer (first column) and how I can remove?

    Thank you, greatly appreciate your support.

    October 31, 2017 at 6:53 am #870761
    Ismael

    Hi,

    I’m sorry but I can’t see any issue with the screenshot. I also checked the actual page but I can’t find the “tip and tail of the arrow” issue.

    Best regards,
    Ismael

    October 31, 2017 at 7:51 am #870777
    tweetgeeb

    Hi Ismael,

    Thanks for getting back to me. That’s because the CSS that Yigit supplied took out the arrow and the LinkedIn icon – leaving just a colour change on hover.

    My original CSS used placed the LinkedIn icon over the arrow and you could see the tip and the tail of the arrow underneath. I then replaced it with the CSS that Yigit supplied but it took both out.

    Need support to remove arrow but keep LinkedIn icon. Can you help?

    .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: ”;
    background-image: url(http://www.dawsonbrothers.com.au/staging/wp-content/uploads/2017/10/linkedIn.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    }

    November 2, 2017 at 9:40 am #871575
    tweetgeeb

    Hello,

    Hoping to get some support with this pls.

    As mentioned CSS provided take both default arrow and LinkedIn icon out – I just require the LinkedIn logo on hover.

    Thank you,

    November 3, 2017 at 4:31 am #871944
    Ismael

    Hi,

    Please edit the elements where you want to apply the linked in overlay. Add a custom css class attribute called “linkedin-overlay” then use the css code.

    .linkedin-overlay .image-overlay.overlay-type-extern .image-overlay-inside:before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    background-image: url(https://www.dawsonbrothers.com.au/staging/wp-content/uploads/2017/10/linkedIn.png);
}

    Enable the custom css class field: https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    November 3, 2017 at 7:27 am #872004
    tweetgeeb

    Thanks for getting back to me, but no resolve I’m afraid. Nothing shows up?

    November 4, 2017 at 11:44 am #872447
    tweetgeeb

    Thank you, worked perfectly. Pls close the ticket.

    November 5, 2017 at 9:04 pm #872812
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Custom roll over image’ is closed to new replies.