Community Forums › Forums › Archived Forums › Design Tips and Tricks › Image/Icon Hover Effect – Parallax Pro Theme
Tagged: Parallax Pro Hover Effect
- This topic has 11 replies, 2 voices, and was last updated 9 years, 8 months ago by Bianca.
-
AuthorPosts
-
August 27, 2014 at 4:07 am #121270BiancaMember
Hi everybody,
I got the Parallax Pro Theme. I would like to get a hover effect with selected images / icons.
With this http://codepen.io/anon/pen/aksgd I created this hover effect.
These are the two source codes. HTML and CSS3. The CSS3 data I inserted in the style.css.HTML
<section id="set-8"> <div class="hi-icon-wrap hi-icon-effect-8"> <a href="#set-8" class="hi-icon hi-icon-archive">Archive</a> <a href="#set-8" class="hi-icon hi-icon-chat">Chat</a> <a href="#set-8" class="hi-icon hi-icon-bookmark">Bookmarks</a> <a href="#set-8" class="hi-icon hi-icon-user">User</a> <a href="#set-8" class="hi-icon hi-icon-contract">Contact</a> </div> </section>
CSS3
body { background: #000; } .hi-icon { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; } .hi-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .hi-icon:before { font-family: 'ecoicon'; speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .hi-icon-effect-8 .hi-icon { background: rgba(255,255,255, 1); -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s; } .hi-icon-effect-8 .hi-icon:after { top: 0; left: 0; padding: 0; z-index: -1; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } .no-touch .hi-icon-effect-8 .hi-icon:hover { background: rgba(255,255,255,0.5); -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); color: #fff; } .hi-icon-effect-8 .hi-icon:hover:after { -webkit-animation: sonarEffect 1.3s ease-out 60ms; -moz-animation: sonarEffect 1.3s ease-out 60ms; animation: sonarEffect 1.3s ease-out 60ms; } @-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5); -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 15px 15px #fff, 0 0 0 15px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 18px rgba(255,255,255,0.5); -moz-transform: scale(1.5); opacity: 0; } } @keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.2; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 21px 21px #0a707d, 0 0 0 18px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 23px 23px #0a707d, 0 0 0 15px rgba(255,255,255,0.5); transform: scale(1.5); opacity: 0; } }
my problem is:
How do I embed the HTML code in the Parallax Theme and how do I use the function later. It would be cool if you could give me a step by step instruction because I have absolutely no idea. Thank you.
Bianca
August 27, 2014 at 4:46 am #121274Genesis DeveloperMemberAre you wanting to place this on home page? or which position are you wanting this on your site?
August 27, 2014 at 4:51 am #121275BiancaMemberHi Genwrock,
yes on my homepage. I want to this in homesection 2 and 4 (Parallax Pro Theme).
I thought in a text widget. If that is possible?August 27, 2014 at 4:56 am #121276Genesis DeveloperMemberYes. right. you will drag & drop the text widget and put the HTML code there. Now hit on save button and refresh the home page. You'll get your output
August 27, 2014 at 4:59 am #121278BiancaMemberOk Thanks, an how i get an icon image in this field?
But i dont see the effect. (sorry i have forgot upload css3).
August 27, 2014 at 5:02 am #121280Genesis DeveloperMemberyou're using ecoicons font-family. You need to install this font. Otherwise you can use Font Awesome or Dashicons .
1. http://melchoyce.github.io/dashicons/
2. http://fontawesome.io/icons/
August 27, 2014 at 5:04 am #121282BiancaMemberThanks 🙂
I have created my own icons. how do I install this
August 27, 2014 at 5:13 am #121285Genesis DeveloperMemberYou can convert those icons to Image file. Then upload the image files and edit your CSS. I think that it'll work.
Otherwise
If you have ttf file then you can generate @fontface file. Download the zip file, extract the file and later upload the fonts file on your server. Next use the @fontface css in your style.css file.
August 27, 2014 at 5:15 am #121286BiancaMemberThank you very much 🙂 have a nice day
August 27, 2014 at 6:15 am #121289BiancaMemberHi Genwrock,
I did not make it to integrate my icons / images in the hover effect. I do not know how to do it in css. My icons are PNG files. Do you have an idea?
August 27, 2014 at 6:35 am #121290Genesis DeveloperMemberCan you give your site URL once?
August 27, 2014 at 7:19 am #121300BiancaMemberits ok thanks. i have found the code-line in css 🙂 Thank you so much.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.