Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #707057

    Hi,
    I’m having a CSS code which I want to implement for image animation for showcasing team members.
    Here is that code which I want to implement to the image.
    How can I make changes?

    #707573

    Hey exxat,

    I’m not sure I understand what you mean, you copied that code to your site and you want to make changes to it? If so, what would those changes be?

    Best regards,
    Rikard

    #707792

    Hi Rikard,
    Sorry for a brief description.
    In that code animation is created from an image using steps(). Basically, I want a page showcasing team members with animation. So on hover, the image gets animated using this steps function.
    I want the “heart button” image replaced by the image of our team members. So how can I use it in enfold theme elements?

    Thanks.

    #707923

    Hi,

    Unfortunately it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However if its really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    #709260

    Hi Basilis,
    I got the result. I updated the CSS and used code block element for HTML part of this code

    Now, Just a little help needed. This thing isn’t responsive.
    Can you please look into the matter.
    Thanks.

    #709628

    Hi!

    Glad that you managed to make it work. Could you please provide a link to a test page? Did you add it using text or code block? If you’re using those elements, move it inside the columns. Set the width of the container to 100% and it will inherit the width of the columns.

    .team-profile {
      width: 100%;
      height: auto;
      top:0%;
      background-position: 0 0;
      animation: revplay 1s steps(15,end) 1 normal forwards;
    }

    Best regards,
    Ismael

    #710230

    Hi Ismael,
    Sorry, I can’t give you the link to the test page as it is on my local server. However, If there is a way to share screen I’m pretty much ready for it.
    BTW Making those changes, i.e making height auto is taking the value 0 and the thus image won’t show up. Also keeping width 100% isn’t working.

    #710613

    Hey!

    Please update us once the site is live. Or provide a screenshot or a screencast so that we can see what’s going on in your end.

    Best regards,
    Ismael

    #710653

    Hi, Check out the video here
    I have tried with both keeping layout section and also keeping layout in color section.
    Thanks.

    #711517

    Hey!

    I played around with the code and I think that the only solution is to have different sizes of the image. And you have to define the background property in the Quick CSS field.

    HTML:

    <div class="team-profile frame5 time7 johndoe"> </div>
    
    <div class="text-profile title">
      NAME
    </div>

    CSS:

    .team-profile {
      width: 400px;
      height: 400px;
      top:0%;
      -webkit-animation-name: play;
      background-position: 0 0;
      animation: revplay 1s steps(15,end) 1 normal forwards;
    }
    
    .johndoe {
       background: url('http://exxatcontent.blob.core.windows.net/exxat-website-public-documents/rakesh%20strip.jpg') left center;
    }
    

    For smaller screens, you have to define the background property again but provide a smaller version of the image.

    @media only screen and (max-width: 767px) {
       .johndoe {
          background: url('http://exxatcontent.blob.core.windows.net/exxat-website-public-documents/rakesh%20strip_smallerversion.jpg') left center;
       }
    }
    

    Regards,
    Ismael

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