Widget:CampaignCards

 <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 + " div:not('.campaignbox-content')").hide('slow'); $("div#" + id + " .campaignbox-content").show('slow'); } else { $("div#" + id).animate({width: '200px', height: '184px'}); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); $("div#" + id + " .campaignbox-content").hide('slow'); } $(".campaignbox:not('div#" + id + "')").toggle(); $("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>