You can login if you already have an account or register by clicking the button below.
Registering is free and all you need is a username and password. We never ask you for your e-mail.
[–]QuantumWannabe0 points
3 points
3 points
(+3|-0)
ago
(edited ago)
Here is how to do it for all three text types (using the same syntax that you described in your post):
/* Your existing code to show images. I moved them out of the '::after' pseudo element for simplicity */
a[href="#spoiler"] {
background-image: url( https://i.imgur.com/uqPXQ8K.gif );
background-position: 0px 0px;
display: block;
height: 178px;
width: 320px;
}
a[href="#sauce"] {
background-image: url( https://i.imgur.com/RFbYygC.gif );
background-position: 0px 0px;
display: block;
height: 281px;
width: 500px;
}
/* Handling the top text. This styles what the text looks like and positions the top text (centers it and gives it some padding to move it down) */
a[href="#sauce"], a[href="#spoiler"] {
position: relative;
text-align: center;
padding-top: 2px;
color: #FFF !important;
text-decoration: none !important;
text-shadow: 1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000, 1px 1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000;
cursor: default;
font-size: 18px;
font-family: sans-serif;
}
/* Since our parent, the a tag, has 'position:relative' we can position the child `strong` tag with `position: absolute`. */
a[href="#sauce"] strong, a[href="#spoiler"] strong {
position: absolute;
display: block;
width: 100%;
bottom: 4px;
font-weight: normal;
}
/* Hover text works by markdown creating a title attribute for the link tag and needs no CSS */
Sort: Top
[–] QuantumWannabe 0 points 3 points 3 points (+3|-0) ago (edited ago)
Here is how to do it for all three text types (using the same syntax that you described in your post):
Example post in my test subverse that you can inspect
[–] moe [S] 0 points 2 points 2 points (+2|-0) ago
Thank ya' very much! /v/moe/comments/79578
@Nurdoidz, you can flag this as "Resolved" now :3