Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 26, 2016 at 9:53 am #638603
    tobee_hh

    Hello guys,

    first up: You guys are great! Not only is enfold still one of the best themes out there, moreover you guys also have a great support when questions arise!

    Here comes my question:

    I want to blur parts of an icon list ( Content & Icon). My low-tech solution sadly did not work: Take a screenshot, blur it in Photoshop and ad it as Image or Color section. The alignment was never in any way accurate or the scaling did not match at all.

    Is there any chance to use any css styling to blur?

    Best regards,
    t.

    Keep up the great work!

    May 26, 2016 at 1:46 pm #638691
    tobee_hh

    Solved it myself… :-)
    .avia-icon-list .avia_start_animation:nth-child(2) .iconlist_icon.avia-font-entypo-fontello {
    filter: blur(8px)
    }

    .avia-icon-list .avia_start_animation:nth-child(2) .iconlist_title {
    filter: blur(8px)
    }

    .avia-icon-list .avia_start_animation:nth-child(2) .iconlist_content {
    filter: blur(8px)
    }

    • This reply was modified 8 years, 5 months ago by tobee_hh.
    May 26, 2016 at 2:13 pm #638709
    tobee_hh

    Additional question:

    is it possible to apply the blur before the animation? Right now the actual content is visible for a few seconds during the animation and then blurred…

    May 27, 2016 at 5:26 am #639078
    Ismael

    Hi,

    Thank you for using Enfold.

    Could you please provide a link to the page in question or a screenshot so that we can inspect it? We tried to create a keyframe animation but it’s not working on chrome, it is ok on firefox.

    /* Chrome, Safari, Opera */
@-webkit-keyframes blurit{
    0% { -webkit-filter: blur(8px); }
    50% { -webkit-filter: blur(4px); }
    100% { -webkit-filter: blur(0px); }
}

/* Standard syntax */
@keyframes blurit{
  0% { filter: blur(8px); }
  50% { filter: blur(4px); }
  100% { filter: blur(0px); }
}

.avia-icon-list li {
  -webkit-animation: blurit 3s linear; /* Chrome, Safari, Opera */
  animation: blurit 3s linear;
}

    Best regards,
    Ismael

    June 1, 2016 at 4:52 pm #641604
    tobee_hh

    Thank you Ismael,

    what happens now is this: http://imgur.com/8liIAO5. But only when the site is strectched beyond a particular width.

    June 3, 2016 at 6:25 am #642399
    Ismael

    Hi,

    Could you please provide a link to the actual page? We will need to inspect it. Did you use css nth-child selectors?

    Best regards,
    Ismael

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