-
AuthorPosts
-
November 2, 2016 at 11:53 am #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?November 3, 2016 at 6:54 am #707573Hey 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,
RikardNovember 3, 2016 at 3:50 pm #707792Hi 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.
November 3, 2016 at 7:53 pm #707923Hi,
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,
BasilisNovember 7, 2016 at 3:17 pm #709260Hi Basilis,
I got the result. I updated the CSS and used code block element for HTML part of this codeNow, Just a little help needed. This thing isn’t responsive.
Can you please look into the matter.
Thanks.November 8, 2016 at 7:39 am #709628Hi!
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,
IsmaelNovember 9, 2016 at 3:10 pm #710230Hi 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.November 10, 2016 at 10:20 am #710613Hey!
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,
IsmaelNovember 10, 2016 at 11:55 am #710653Hi, Check out the video here
I have tried with both keeping layout section and also keeping layout in color section.
Thanks.November 13, 2016 at 2:09 am #711517Hey!
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 -
AuthorPosts
- You must be logged in to reply to this topic.