Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 1: | Line 1: | ||
<div onClick="openCard(this)" class="campaignbox" id="test"> | <div onClick="openCard(this)" class="campaignbox" id="test"> | ||
<div class="campaignbox-card"> | |||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | |||
<div class="campaignbox-text"> | |||
<h4 style="margin:7px"> | |||
<b>Season 1</b></h4> | |||
<p style="margin-top:4px">Band of Thieves</p> | |||
</div> | |||
</div> | |||
<div class="campaignbox-content"> | |||
<h1 class="darkCrystal"> | |||
Band of Thieves | |||
</h1> | |||
</div> | |||
</div> | |||
<div onClick="openCard(this)" class="campaignbox" id="test1"> | |||
<div class="campaignbox-card"> | <div class="campaignbox-card"> | ||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | <img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | ||
| Line 15: | Line 30: | ||
</div> | </div> | ||
</div> | </div> | ||
<div onClick="openCard(this)" class="campaignbox" id="test2"> | |||
<div class="campaignbox-card"> | |||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | |||
<div class="campaignbox-text"> | |||
<h4 style="margin:7px"> | |||
<b>Season 1</b></h4> | |||
<p style="margin-top:4px">Band of Thieves</p> | |||
</div> | |||
</div> | |||
<div class="campaignbox-content"> | |||
<h1 class="darkCrystal"> | |||
Band of Thieves | |||
</h1> | |||
</div> | |||
</div> | |||
<div onClick="openCard(this)" class="campaignbox" id="test3"> | |||
<div class="campaignbox-card"> | |||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | |||
<div class="campaignbox-text"> | |||
<h4 style="margin:7px"> | |||
<b>Season 1</b></h4> | |||
<p style="margin-top:4px">Band of Thieves</p> | |||
</div> | |||
</div> | |||
<div class="campaignbox-content"> | |||
<h1 class="darkCrystal"> | |||
Band of Thieves | |||
</h1> | |||
</div> | |||
</div> | |||
<script> | <script> | ||
Revision as of 20:31, 29 August 2017
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<script>
function openCard(card){
var id = card.id
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); if(!$("div#" + id).hasClass("opened")){ $("div#" + id).animate({width: '100%', height:'300px'}); $("div#" + id + " .campaignbox-content").show('slow'); $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); } else { $("div#" + id).animate({width: '200px', height: '184px'}); $("div#" + id + " .campaignbox-content").hide('slow'); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); } $("div#" + id).toggleClass("opened"); } </script>
<style> .campaignbox {
width: 200px; height: 184px; border: 3px solid white; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33);
} .campaignbox-card {
cursor: pointer;
} .campaignbox-image {
width: 100%; opacity:0.85; margin-bottom: -5px;
} .campaignbox-text {
padding: 0.01em 5px; color: white; text-align: center;
} .campaignbox-content {
display: none; color:white; }
</style>
