Tagged: , ,

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

    Hi

    I would like to know if with ENFOLD I can make large icons that change when the mouse passes.

    Example:

    There are 3 large white circles, with an icon inside the circle. an icon of 2 people, an icon of an image, and the third an icon of a rocket.

    I really like the mouse pass effect.

    Thank you.

    #1163042

    Hey brunet77,

    It looks like there is already an effect on them. Were you able to solves this?

    Best regards,
    Jordan Shannon

    #1163077

    No, the example is the effect that I like. I have not done it. It is not theme Enfold.

    #1163105

    Hi,

    I see. This may be possible, but would require a bit of customization that goes beyond the scope of support. You would likely need a freelancer for that kind of effect.

    Best regards,
    Jordan Shannon

    #1163131

    Customization?
    There is nothing similar. It is very simple. In list of icons or something similar?

    #1163195

    Hi brunet77,

    Enfold has the icons that flip on hover. Here is the demo:

    Will this work for you?

    Best regards,
    Victoria

    #1163754

    Many thanks Victoria:

    Very beautiful icon effects. I like to show a text when selected.

    I will see how it is done.

    Thank you very much.
    I knew that a freelace was not necessary for this function.

    Thank you.

    #1163771

    because Enfold uses as icons an icon-set and did some dimensions on that by line-height of the entypo fontello font. we must reconstruct a bit on that. On your example page there are svg as icons!

    If you choose the big icon alb and animation only have icons with links.

    you must look to that setup : i have choosen 80px icon-height ! this had to be synchronized with one css setting of that effect.
    I gave to the icon alb elment a custom-class of: move

    here is the result: https://webers-testseite.de/icon-in-motion/

    what i now try to achieve is that the radar effect of enfold is included to that effect.

    here is the interims code:

    .av_font_icon.av-icon-style-border.move .av-icon-char {
        position: relative;
        display: inline-block;
        overflow: hidden;
        background-color: #fff;
    	-webkit-transition: background .5s,color .5s,-webkit-box-shadow .5s;
    	transition: background .5s,color .5s,-webkit-box-shadow .5s;
    	transition: background .5s,color .5s,box-shadow .5s;
    	transition: background .5s,color .5s,box-shadow .5s,-webkit-box-shadow .5s;
    	border-radius: 50%;
    	-webkit-box-shadow: 0 0 0 2px #bbb;
    	box-shadow: 0 0 0 2px #bbb;
        height: 80px;
    }
    
    .av_font_icon.av-icon-style-border.move .av-icon-char:hover {
        background-color:  #6b6b6b;
          -webkit-box-shadow: 0 0 0 6px rgba(0,0,0,.1);
        box-shadow: 0 0 0 6px  rgba(0,0,0,.1);
    }
    
    .av_font_icon.av-icon-style-border.move .av-icon-char:before {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    
    .av_font_icon.av-icon-style-border.move .av-icon-char:hover:before {
        animation: toRightFromLeft .5s forwards;
        color: #fff
    }
    
    /***  animation for that ****/
    @-webkit-keyframes toRightFromLeft {
     49% {
      -webkit-transform:translateX(100%) translateY(-50%);
      transform:translateX(100%) translateY(-50%)
     }
     50% {
      opacity:0;
      -webkit-transform:translateX(-100%) translateY(-50%);
      transform:translateX(-100%) translateY(-50%)
     }
     51% {
      opacity:1
     }
    }
    @keyframes toRightFromLeft {
     49% {
      -webkit-transform:translateX(100%) translateY(-50%);
      transform:translateX(100%) translateY(-50%)
     }
     50% {
      opacity:0;
      -webkit-transform:translateX(-100%) translateY(-50%);
      transform:translateX(-100%) translateY(-50%)
     }
     51% {
      opacity:1
     }
    }
    #1163773

    if you like to have that sonar effect too: just replace the first part : overflow:hidden to overflow:visible see testpage:

    .av_font_icon.av-icon-style-border.move .av-icon-char {
        position: relative;
        display: inline-block;
        overflow: visible;
        background-color: #fff;
    	-webkit-transition: background .5s,color .5s,-webkit-box-shadow .5s;
    	transition: background .5s,color .5s,-webkit-box-shadow .5s;
    	transition: background .5s,color .5s,box-shadow .5s;
    	transition: background .5s,color .5s,box-shadow .5s,-webkit-box-shadow .5s;
    	border-radius: 50%;
    	-webkit-box-shadow: 0 0 0 2px #bbb;
    	box-shadow: 0 0 0 2px #bbb;
            height: 80px;
    }

    and see here – the height must set to the icon dimension for that

    #1163800

    Hi brunet77,

    Is Guenni007’s solution helping you?

    @guenni007 Thank you for the solution.

    Best regards,
    Victoria

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.