Comments (10)
Yes, that's a good idea. How about this at the end of screen.css
.spoiler:after {
position:absolute;
opacity:0;
content:'click to reveal';
top:3px;
left:0;
text-shadow:none;
background:#222;
color:#fff;
display:inline-block;
font-size:13px;
line-height:1;
padding:2px 3px;
width:100px;
font-family:Arial;
text-align:center;
border-radius:3px;
transition: all .3s;
}
.spoiler:hover:after {
opacity:1;
}
from mediumish-theme-jekyll.
Let me give it a go!
from mediumish-theme-jekyll.
Nope, does not work.
from mediumish-theme-jekyll.
I forgot to tell you that you must add position:relative to spoiler so, full code:
.spoiler {
color: transparent;
text-shadow:0 0 6px rgba(0,0,0,0.2);
transition: all .4s;
cursor:pointer;
position:relative;
}
.spoiler:after {
position:absolute;
opacity:0;
content:'click to reveal';
top:3px;
left:0;
text-shadow:none;
background:#222;
color:#fff;
display:inline-block;
font-size:13px;
line-height:1;
padding:2px 3px;
width:100px;
font-family:Arial;
text-align:center;
border-radius:3px;
transition: all .3s;
}
.spoiler:hover:after {
opacity:1;
}
from mediumish-theme-jekyll.
Yep, that works.
How can I center it in the div?
Thanks!
from mediumish-theme-jekyll.
Strange, I'm testing it now on my local and it works.
from mediumish-theme-jekyll.
Yea, my build hadn't updated, that's my bad.
from mediumish-theme-jekyll.
Ok, for center, again full code:
.spoiler {
color: transparent;
text-shadow:0 0 6px rgba(0,0,0,0.2);
transition: all .4s;
cursor:pointer;
position:relative;
}
.spoiler:after {
position:absolute;
opacity:0;
content:'Click to reveal spoiler';
top:45%;
left:calc(50% - 100px);
text-shadow:none;
background:#222;
color:#fff;
display:inline-block;
font-size:13px;
line-height:1;
padding:2px 3px;
width:150px;
font-family:Arial;
text-align:center;
border-radius:3px;
transition: all .4s;
}
.spoiler:hover:after {
opacity:1;
}
from mediumish-theme-jekyll.
Works, thanks! Pushing it live.
from mediumish-theme-jekyll.
Ok, me too.
from mediumish-theme-jekyll.
Related Issues (20)
- Smooth scrolling conflict with Bootstrap tabs.
- Dark Mode HOT 1
- Build success with multiple errors HOT 1
- Lunr Search Problem HOT 7
- Help needed: customize header for list vs post
- Local display different from the one on gh-pages HOT 2
- not responsive embeded video youtube
- Search isn't working HOT 5
- TOC Address bar
- Google Analytics Support HOT 1
- duplicate title
- Categories page load to fast
- Docker Compose file has invlaid syntax
- post-read-more anchor tag has an error
- Sitemap error
- File not found errors when trying to add mediumish theme to github pages
- default.html builds with hardcoded favicon (logo.png) rather than the value of favicon in config.yml
- Security Issue (Cross-Site Scripting a.k.a XSS)
- Responsible disclosure policy HOT 1
- AMP support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mediumish-theme-jekyll.