hi im sorry if this question seems stupid, but i've just started learning how to make a custom html theme. how do you make the perma links appear over an image when you hover on the image? like for example- the permalinks in youth theme by florels
Not a stupid question! I’m assuming you have some knowledge with coding since you’re making a theme so here are the steps. You don’t necessarily have to do them in this order.
In the css, make a class including the dimensions & position of the box you want and customize it however (this will be what appears on hover)
Make sure the box has 0 opacity
add a transition to make it appear and disappear smoothly
in the html part, add the class you just made under your post code. If you only want that permalink to appear on a specific post (photos, for example), only put that class to the photos section
Next, you have to write what you want to show up when you hover, such as the notes, reblog button, etc. You can find how to do that here
Steps two and three might look like this:
{block:Photo}
INFO
{/block:Photo}
Now you have to make it show up on hover of the post. So make a new class/id for your posts and attach the permalink code. You can do that by writing
.post:hover .perma { opacity:1;-webkit-transition: all 0.45s ease-in-out;-moz-transition: all 0.45s ease-in-out;transition: all 0.45s ease-in-out;}
Now you have to edit it a lot to make it work for you but that’s it!
