What a title, uh? LOL. Ok guys, this is so much difficult for me that I started to think that probably I should quit the idea. But first I will try to ask help here as you always have been a supreme helpfull reosurce for me and for this I’ll never sto to say thank you. If you want, I’ll explain my problem here below, then you decide if you will help me or not.
So, I found this tutorial on creating some cool hover effects with CSS. I then decided to see if I was able to implement two of them in togheter in my community logo (http://www.klayz.com/community/). Check the examples:
So, I opened those examples files to see if I was able to do it by myself, but I’m sincerely not able to do it.
Any type of help will be appreciated! Thanks!
You will need to show us the code for your attempts so far and explain what’s not working.
Because giving links to code that does work, does not identify your problem, which means solving it is virtually impossible.
Thank you for your reply, Sam. Basically I haven’t included my code because I only tried to replace the demo image with my own image, and obviously it doesn’t work as expected. So basically I would need to take the code that create that animation for the white box, than I’d need to attach to that box, only when hovered, the icons to the right. But I’m a little confused on how to do this. Ok, I’ll try again to see what I can achieve!
See if you can get the original code to work on your site. If that works then you know the problem relates to the image substitution. If it doesn’t then you know you have copied something incorrectly.
Hi Norman. It looks as though trying to combine the two hover effects would be a rather complicated task. If it were me I’d choose one effect and go with that.
I realise this doesn’t actually answer your question but perhaps you could try one effect first and having got that working, modify it to include whatever you want from the second one.
Thank you guys! I’m going to create a JS fiddle with my basic logo and then I’ll try to first include the first effect and then proceed from that. My problem is that basically I need that effect, but to be true it shouldn’t work exactly as in the demo. I’d love to have the white box appear like a “border” in my logo (when hovered - but with the same effect, which is pretty cool imho). So I don’t need to set it as a bg image for the element itself nor to have the <figure> and <figcaption> tags (at least if possible, in this case).
I recreated it: https://jsfiddle.net/Dakoom/bd5uk7hL/
But for now I get it as per demo (obviously). I’d like to have the white box as a “border”. And… this is the problem. Sincerely I don’t know where to start here.
EDIT: Probably a less elegant way to achieve this would be to simply create another logo image and show that on hover. But this way I can’t have the cool animation.
but perhaps you could try one effect first and having got that working, modify it to include whatever you want from the second one.
