Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #223734

    I’m having an issue with using the Team Member in combination with a hover element.

    Page: http://carveskateshop.us/team/

    Code:
    .avia-team-member{margin:30px 0; clear:both;}

    .team-member-name{margin-top:20px;}

    .team-member-job-title{margin-top:-7px; font-size: 10px; }

    .team-social a{text-decoration: none; position: relative; border-radius: 30px; padding: 0 16px; background: #fff;margin: 3px; display: inline-block; height:53px; line-height:54px; width:53px; }

    .team-img-container{ position: relative; overflow: hidden; border-radius: 3px; text-align: center;}

    .team-img-container img{ display:block; margin:0 auto; }

    .avia-team-member .team-social{
    border: 7px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    font-size:100px;
    background: #fff;
    background: rgba(153, 7, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    top:0; left:0; right:0; bottom:0;
    text-align: center;
    border-radius:350px;
    }

    .team-social-inner{
    width:100%;
    padding:0 5%;
    position: absolute;
    top:50%;
    margin-top:-26px;
    left:-20px;

    }

    .team-img-container:hover .team-social {
    visibility: visible;
    background-clip: padding-box;
    opacity: 1;
    height: 90%;
    margin: 4%;
    overflow: hidden;
    padding: 4.5%;
    width: 90%;
    -moz-transition: background-image 200ms ease-out;
    -o-transition: background-image 200ms ease-out;
    -webkit-transition: background-image 200ms ease-out;
    transition: background-image 200ms ease-out
    -moz-transform: 1s;
    -ms-transform: 1s;
    -o-transform: 1s;
    -webkit-transform: 1s;
    transform: 1s

    }

    .avia-tooltip{
    position: absolute;
    z-index: 9999999;
    padding:12px;
    margin-top:-18px;
    margin-left: -4px;
    background: #000;
    background: rgba(0, 0, 0, 0.8);
    color:#fff;
    width:140px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 18px;
    text-align: center;
    }

    .avia-tooltip .avia-arrow{
    background: rgba(0, 0, 0, 0.8);
    border:none;
    }

    .avia-tooltip .avia-arrow-wrap{
    width:20px;
    height:20px;
    position: absolute;
    bottom:-20px;
    left:50%;
    margin-left:-7px;
    overflow: hidden;
    }

    • This topic was modified 10 years, 9 months ago by tlow87.
    #223966

    Hey tlow87!

    Please try adding following code to Quick CSS in Enfold theme options under Styling tab

    .team-social a { background: transparent; }

    Regards,
    Yigit

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