Image Block

{$caption}

有typing,align,background,name,caption设置

代码:

[[module css]]
.image-block { float:right;float:{$align};background:white;background:{$background};box-shadow:0 0 1rem #000;}
.image-caption { text-align:center;font-family:monospace;}
.image-block,.image-animation { display:none; }
.image-typing.normal .image-block,.image-typing .image-block { display:block; }
.image-typing.other .image-block { display:none; }
[[/module]]
[[div class="image-typing {$type}"]]
[[div class="image-block"]]
[[image {$name}]]
[[div class="image-caption"]]
{$caption}
[[/div]]
[[/div]]
[[div class="image-animation"]]
 
[[module CSS]]
/* Not Difficultter component */
.wrap-overground {
width:100%;
height:8.5em;
border:6.1px solid black;
box-shadow:0px 0px 1rem #aaa;
background:#333;
border-radius: 0.7em;
}
.overground {
background-image:linear-gradient(#00000000,#666666ff),url("{$name}");
background-repeat: repeat-x;
animation:links-me 15s infinite;
background-size:cover;
height:100%;
}
.overground:hover::before {
content:"{$caption}";
    width: 100%;
transition:all 1.3s;
opacity:1;
  background: #88888899;
    color: white;
    text-shadow: 0px 0px 2.5px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    font-size: 300%;
}
.overground::before {
    content: "";
    height: 100%;
    background: #88888899;
    color: white;
    text-shadow: 0px 0px 2.5px #000;
    width: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    font-size: 300%;
overflow:hidden;
}
@keyframes links-me {
0% {
background-position:100vw bottom;
background-position:100vw {$align};
}
100% {
background-position:-100vw bottom;
background-position:-100vw {$align};
}
}
[[/module]]
[[div class="wrap-overground"]]
[[div class="overground"]]
[[/div]]
[[/div]]
[[iftags +component]]
[[module CSS]]
.dark-code * {
background:black;
color:white;
font-weight:900;
}
[[/module]]
You should do[will do]:
* image Tags[Must do]
* description Tags[Must do]
To This Look The Include Code:
[[div class="dark-code"]]
> ##ff0000|@@[[@@####00ffff|include## ##ff00ff|local-animation-image##
> |##555555|image##=You Image
> |##777777|description##=You description
> ##ff0000|]]##
[[/div]]
------
Look Code:
[[code type="CSS"]]
[[module CSS]]
/* Not Difficultter component */
.wrap-overground {
width:100%;
height:8.5em;
border:6.1px solid black;
box-shadow:0px 0px 1rem #aaa;
background:#333;
border-radius: 0.7em;
}
.overground {
background-image:linear-gradient(#00000000,#666666ff),url("{$name}");
background-repeat: repeat-x;
animation:links-me 15s infinite;
background-size:cover;
height:100%;
}
.overground:hover::before {
content:"{$caption}";
    width: 100%;
transition:all 1.3s;
opacity:1;
  background: #88888899;
    color: white;
    text-shadow: 0px 0px 2.5px #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    font-size: 300%;
}
.overground::before {
    content: "";
    height: 100%;
    background: #88888899;
    color: white;
    text-shadow: 0px 0px 2.5px #000;
    width: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: fantasy;
    font-size: 300%;
overflow:hidden;
}
@keyframes links-me {
0% {
background-position:100vw bottom;
}
100% {
background-position:-100vw bottom;
}
}
[[/module]]
[[/code]]
[[/iftags]]
 
[[/div]]
[[/div]]