Scribd
Upload
237 views8 pages

Image Occlusion Enhanced Code (Old - Joe)

The document contains code for an image occlusion enhanced card. It includes front and back code with HTML and CSS. The front code displays an image with a question mask over it. The back code displays the image with an answer mask that can be toggled on and off. Additional features include headers, tags, remarks, sources and extras. Styling is included to control layout, colors and formatting on different screen sizes.

Uploaded by

Elle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
237 views8 pages

Image Occlusion Enhanced Code (Old - Joe)

The document contains code for an image occlusion enhanced card. It includes front and back code with HTML and CSS. The front code displays an image with a question mask over it. The back code displays the image with an answer mask that can be toggled on and off. Additional features include headers, tags, remarks, sources and extras. Styling is included to control layout, colors and formatting on different screen sizes.

Uploaded by

Elle
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 8

IMAGE OCCLUSION EHNANCED CODE:

FRONT:
{{#Image}}
<div id="io-wrapper">
<div id="io-overlay">{{Question Mask}}</div>
<div id="io-original">{{Image}}</div>
</div>
{{Footer}}

<script>
// Prevent original image from loading before mask
aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
var original = document.querySelector('#io-original');
original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
loaded();
} else {
mask.addEventListener('load', loaded);
}
</script>
{{/Image}}
<hr1><br>
<div class="box outer">
<div class="box row">
<div class="col tl">
<div id= "Headerlimit"><Div style= "Text-align: Left"><i id= "Header"><div id="io-
header">[{{Header}}]</div></i></div></div></div>
{{#Tags}}
<br id=mobilebr>
<div class="col tr">
<div style= "Text-align: Right"><div id="tags-container">{{Tags}}</div>
<script>
var tagContainer = document.getElementById("tags-container")
if (tagContainer.childElementCount == 0) {
var tagList= tagContainer.innerHTML.split(" ");
var kbdList = [];
var newTagContent = document.createElement("div");

for (var i = 0; i < tagList.length; i++) {


var newTag = document.createElement("kbd");
newTag.innerHTML = tagList[i];
newTagContent.append(newTag)
}
tagContainer.innerHTML = newTagContent.innerHTML;
tagContainer.style.cursor = "default";
}
</script></div></div>
{{/Tags}}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////

STYLE:
/* Style added for the box display */
div.box{
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
width: 100%;
}

div.outer {
border: 0px solid #002b36;
flex-wrap: wrap;
flex-direction: column;
}

div.row {
align-items: stretch;
flex-direction: column;
}

div.tl {
border-width: 0px;
border-color: #002b36;
border-style: solid;
}

div.bottom {
border-width: 0px;
border-color: #002b36;
border-style: solid;
}

@media only screen and (min-width: 500px) {


div.row {
flex-direction: row;
}

div.col {
flex-grow: 1;
min-width: 50%;
}

div.tl {
border-width: 0px;
}

div.tl.nightMode {
border-color: #eee8d5;
}

div.tr {
border-width: 0px;
border-color: #002b36;
border-style: solid;
}

#horizontal { display: none }


#mobilebr {display: none}

div.tl { border: none; }


}

@media only screen and (max-width: 500px) {


#vertical {display: none}
#Source {display: none}
#Header {display:none}
}

#Headerlimit {
word-wrap: break-all;
width: 95%;
}

/* GENERAL CARD STYLE */


.card {
font-family: Verdana;
font-size: 18px;
text-align: center;
color: black;
background-color: white;
height: 100%;
margin: 0px 15px;
flex-grow: 1;
padding-bottom: 1em;
}
.mobile .card { padding-bottom: 5em;
}

/* OCCLUSION CSS START - don't edit this */


#io-overlay {
position:absolute;
top:0;
width:100%;
z-index:3
}

#io-original {
position:relative;
top:0;
width:100%;
z-index:2;
visibility: hidden;
}

#io-wrapper {
position:relative;
width: 100%;
}
/* OCCLUSION CSS END */

/* OTHER STYLES */
#io-header{
font-family: Verdana;
font-size: 0.75rem;
}

#io-footer{
max-width: 80%;
font-style: italic;
}

#io-extra-wrapper{
/* the wrapper is needed to center the
left-aligned blocks below it */
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 0.5em;
}

#io-extra{
text-align:center;
display: inline-block;
}

.io-extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}

.io-field-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}

#io-revl-btn {
font-size: 0.5em;
}

/* ADJUSTMENTS FOR MOBILE DEVICES */

.mobile .card, .mobile #content {


font-size: 120%;
margin: 0;
}

.mobile #io-extra-wrapper {
width: 95%;
}

.mobile #io-revl-btn {
font-size: 0.8em;
}

/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost.
Edit via the add-on configuration */
.mobile .card img {height:unset !important; width:unset !important;}
/*End of style added by resize image add-on*/

hr1 {
background: url('Old_Joe.png') no-repeat top center;
background-size: contain;
display: block;
height: 45px;
border: 0;
position: relative;
}
hr1:before,
hr1:after {
content: '';
display: block;
position: absolute;
background: #d7d7d7;
height: 2px;
top: 20px;
}
hr1:before {
left: 0;
right: 50%;
margin-right: 10px;
}
hr1:after {
right: 0;
left: 50%;
margin-left: 10px;
}

/* TAGS */
/* Clickable Tags (need to download the add-on) */
kbd {
display: inline-block;
letter-spacing: .2px;
font-weight: bold;
font-size: 16px !important;
text-shadow: none !important;
padding: 0.05rem 0.1rem !important;
margin: 1px !important;
border-radius: 4px;
border-width: 1.5px !important;
border-style: solid;
background-color: transparent !important;
box-shadow: none !important;
opacity: 0.5;
vertical-align: left;
}

/* Tag Becomes More Visible On Hover */


kbd:hover { opacity: 1; transition: opacity 0.2s ease; }

/* Tag Colors */
kbd:nth-of-type(1n+0) { border-color: #fc00ff; color: #fc00ff; }
kbd:nth-of-type(2n+0) { border-color: #03A9F4; color: #03A9F4; }
kbd:nth-of-type(3n+0) { border-color: #FF0000; color: #FF0000; }
kbd:nth-of-type(4n+0) { border-color: #faed27; color: #faed27; }
kbd:nth-of-type(5n+0) { border-color: #FF9933; color: #FF9933}
kbd:nth-of-type(6n+0) { border-color: #ff6ec7; color: #ff6ec7; }
kbd:nth-of-type(7n+0) { border-color: #8ffcff; color: #8ffcff; }
kbd:nth-of-type(8n+0) { border-color: #ff009a; color: #ff009a; }
kbd:nth-of-type(9n+0) { border-color: #39ff14; color: #39ff14; }
kbd:nth-of-type(10n+0) { border-color: #1b03a3; color: #1b03a3; }

/* Tag Mobile Adjustments */


.mobile kbd { opacity: .9; margin: 1px !important; display: inline-block; font-size: 14px !
important; }
.mobile #tags-container {line-height:0.6rem; margin-left: 0px; }
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////

BACK:
{{#Image}}
<div id="io-wrapper">
<div id="io-overlay">{{Answer Mask}}</div>
<div id="io-original">{{Image}}</div>
</div>
{{Footer}}
{{Remarks}}
{{Sources}}
{{Extra 1}}
{{Extra 2}}

<script>
// Toggle answer mask on clicking the image
var toggle = function() {
var amask = document.getElementById('io-overlay');
if (amask.style.display === 'block' || amask.style.display === '')
amask.style.display = 'none';
else
amask.style.display = 'block'
}

// Prevent original image from loading before mask


aFade = 50, qFade = 0;
var mask = document.querySelector('#io-overlay>img');
function loaded() {
var original = document.querySelector('#io-original');
original.style.visibility = "visible";
}
if (mask === null || mask.complete) {
loaded();
} else {
mask.addEventListener('load', loaded);
}
</script>
{{/Image}}
<hr1><div style = "text-align: left"><button id="io-revl-btn" onclick="toggle();">Toggle
Masks</button></div><div class="box outer">
<div class="box row">
<div class="col tl">
<div id= "Headerlimit"><div style = "text-align: left"><i id= "Header"><div id="io-
header">[{{Header}}]</div></i></div></div></div>
{{#Tags}}
<br id=mobilebr>
<div class="col tr">
<div style= "Text-align: Right"><div id="tags-container">{{Tags}}</div>
<script>
var tagContainer = document.getElementById("tags-container")
if (tagContainer.childElementCount == 0) {
var tagList= tagContainer.innerHTML.split(" ");
var kbdList = [];
var newTagContent = document.createElement("div");
for (var i = 0; i < tagList.length; i++) {
var newTag = document.createElement("kbd");
newTag.innerHTML = tagList[i];
newTagContent.append(newTag)
}
tagContainer.innerHTML = newTagContent.innerHTML;
tagContainer.style.cursor = "default";
}
</script></div></div>
{{/Tags}}

You might also like