Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 28, 2022 at 12:09 am #1342499
    Jak73

    Hi,

    i would like to make the borders of my team members images flashing (if possible with more then two colors).

    How can i do that?

    Kind regards Jak

    February 28, 2022 at 12:37 am #1342502
    Mike

    Hey Jak73,
    Thanks for the link to your site, I see you are currently using this css to make a yellow dotted border around your team members:

    .avia-team-member .team-img-container img {
    border-style: dotted;
    border-width: 15px 15px 15px 15px;
    border-color: #eeee22;
}

    change this to this:

    .avia-team-member .team-img-container img {
    border-style: dotted;
    border-width: 15px 15px 15px 15px;
    border-color: #eeee22;
    -webkit-animation: borderBlink 1s step-end infinite;    
    animation: borderBlink 1s step-end infinite; 
}

@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: #fff;   
    }    
    50% {    
        border-color: #eeee22;    
    }    
}    
@keyframes borderBlink {    
    from, to {    
        border-color: #fff;    
    }    
    50% {    
        border-color: #eeee22;    
    }    
}

    After applying the css, please clear your browser cache and check.
    the dotted border should now flash yellow & white.

    Best regards,
    Mike

    February 28, 2022 at 1:01 am #1342504
    Jak73

    Hi Mike,

    that is so cool! Thanks a lot!

    How can i make it blinking more faster and and to more colors?

    kind regards Jak

    February 28, 2022 at 12:26 pm #1342530
    Rikard

    Hi,

    You can add more colours by adding more % statements into the bottom block of Mikes example. You can adjust the speed in the animation arguments in the top block.

    Best regards,
    Rikard

    February 28, 2022 at 1:01 pm #1342546
    Jak73

    Hi Mike, hi Rkard,

    .avia-team-member .team-img-container img {
    border-style: dotted;
    border-width: 15px 15px 15px 15px;
    border-color: #eeee22;
    -webkit-animation: borderBlink 1s step-end infinite; (here i change the “1s” to f.e. “0.2”) right?
    animation: borderBlink 1s step-end infinite; (here i change the “1s” to f.e. “0.2”) right?
    }

    What should exactly do here? I’m a bit confused.

    @-webkit-keyframes borderBlink {
    from, to {
    border-color: #fff;
    }
    50% {
    border-color: #eeee22;
    }
    }
    @keyframes borderBlink {
    from, to {
    border-color: #fff;
    }
    50% {
    border-color: #eeee22;
    }
    }

    Please let me kno, what i shoul do, to get more then to colors blinking.

    Kind regards Jak

    February 28, 2022 at 1:49 pm #1342558
    Mike

    Hi,
    Thanks for the feedback, you changed the timing correctly, to add a third color try like this:

    .avia-team-member .team-img-container img {
    border-style: dotted;
    border-width: 15px 15px 15px 15px;
    border-color: #eeee22;
    -webkit-animation: borderBlink 0.2s step-end infinite;    
    animation: borderBlink 0.2s step-end infinite; 
}

@-webkit-keyframes borderBlink {    
    from, to {    
        border-color: #fff;   
    }    
    33% {    
        border-color: #eeee22;    
    }
    66% {    
    border-color: #00FAFE;    
} 
}    
@keyframes borderBlink {    
    from, to {    
        border-color: #fff;    
    }    
    33% {    
        border-color: #eeee22;    
    }
    66% {    
    border-color: #00FAFE;    
} 
}

    Best regards,
    Mike

    February 28, 2022 at 4:13 pm #1342577
    Jak73

    So cool! Thanks a lot!

    I would like to have a little space between the photo and the border of each team member image. How can i add a little space, please?

    kind regards Jak

    February 28, 2022 at 4:57 pm #1342584
    Yigit

    Hey Jak,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
.avia-team-member .team-img-container img {
  padding: 15px;
}

    Regards,
    Yigit

    March 1, 2022 at 1:11 am #1342616
    Jak73

    This is so cool!
    Thanks a lot!

    kind regards Jak

    March 1, 2022 at 2:21 am #1342621
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How to make borders of team members flashing’ is closed to new replies.