Page 6 of 13
INSET - JoomlaXTC K2 Content Wall
Use the following mark up for the Module HTML and Main Content HTML:
Module HTML
<div align="center"> <div align="center" class="slidewrap"> {mainarea} </div> </div>
Main Content HTML
<div class="newmainwrap" align="center"> <div class="newmainslide" align="center"> <div class="circleanim"> <h2><a href="/{link}">{title}</a></h2> <h4 class="introtext">{introtext}</h4> <a class="rmore1" href="/{link}">Read More</a> </div> </div> </div>
CSS
/* Element Style */ .slidewrap {overflow:visible;} .slidewrap .wallview {overflow:visible!important;} .newmainslide {width:660px; height:660px; text-align:center;padding:30px; opacity:0.7; border-radius:50%; border:4px dotted rgba(255,255,255,0.2); box-shadow: 0 0 0 20px rgba(0,0,0,0.4); -webkit-transition: all 0.75s; -moz-transition: all 0.75s; -ms-transition: all 0.75s; transition: all 0.75s; overflow:visible; transform: scale(0.5); /* W3C Official Syntax */ -o-transform: scale(0.5); /* Opera 10.5+ */ -ms-transform: scale(0.5); /* Internet Explorer 9.0+ */ -moz-transform: scale(0.5); /* Firefox 3.6+ */ -webkit-transform: scale(0.5); /* Chrome / Safari 3.2+ */ } .newmainslide:hover {overflow:visible;} .newmainslide a, .newmainslide h4 {color:#fff!important;} .newmainslide h4 {margin:30px 0 34px;letter-spacing:4px; font-size:18px; font-weight:bold!important; text-shadow: 0 0 20px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,1)!important; } .newmainslide .rmore1 {border-radius:28px;text-transform:uppercase;letter-spacing:4px; display:inline-block; background: rgba(0,0,0,0.15); border:1px solid #FFF;color:#FFF; font-size:21px; padding:14px 38px; } .newmainslide h2 {font-size:74px;text-shadow: 0 0 40px rgba(0,0,0,1)!important; line-height:80%!important;margin-top:220px!important;} .newmainslide .circleanim h4, .newmainslide .circleanim h2, .newmainslide .circleanim h2 a, .newmainslide .circleanim .rmore1 {position:relative!important; z-index:9999999999!important;} .newmainslide h2 a {font-weight:normal!important; text-shadow: 0 0 40px rgba(0,0,0,1), 0 0 60px rgba(0,0,0,1)!important; } .newmainslide .circleanim { background-color: rgba(255,255,255,0.17) ; border-radius: 50%; cursor: pointer; position: relative; margin: 0 auto; width: 660px; height: 660px; overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); scale:0; border:2px dotted rgba(255,255,255,0.2); } .newmainslide .circleanim:hover { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); transform: rotate(-360deg); } .newmainslide .circleanim:before, .newmainslide .circleanim:after { border-radius: 100%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; box-shadow: inset 0.86em 0 0 rgba(255,255,255,0.5), inset 0 0.86em 0 rgba(255,255,255,0.5), inset -0.86em 0 0 rgba(255,255,255,0.5), inset 0 -0.86em 0 rgba(255,255,255,0.5); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transition: all 1s; -webkit-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -moz-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -ms-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); -o-transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); transition-timing-function: cubic-bezier(0.675, 0.075, 0.450, 0.925); /* custom */ } .newmainslide .circleanim:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } .newmainslide .circleanim:hover:after { } .current .newmainslide { transform: scale(1); /* W3C Official Syntax */ -o-transform: scale(1); /* Opera 10.5+ */ -ms-transform: scale(1); /* Internet Explorer 9.0+ */ -moz-transform: scale(1); /* Firefox 3.6+ */ -webkit-transform: scale(1); /* Chrome / Safari 3.2+ */ } .current .newmainslide .circleanim:before, .current .newmainslide .circleanim:after { box-shadow: inset 14.6em 0 0 rgba(0, 0, 0, 0.3), inset 0 14.6em 0 rgba(0, 0, 0, 0.3), inset -14.6em 0 0 rgba(0, 0, 0, 0.3), inset 0 -14.6em 0 rgba(0, 0, 0, 0.3); animation-delay: 0s; } @media(max-width:1050px){ .newmainslide {background-image:none!important;} .newmainslide .circleanim:before, .newmainslide .circleanim:after, .current .newmainslide .circleanim:before, .current .newmainslide .circleanim:after {box-shadow:none!important} } @media(max-width:850px){ .newmainslide {width:460px; height:460px; padding:20px;} .newmainslide h2 {font-size:54px; margin-top:140px!important; } .newmainslide h4 {margin:16px 0 20px; font-size:16px;} .newmainslide .rmore1 {border-radius:28px; font-size:16px; padding:14px 38px; } .newmainslide .circleanim {width: 460px; height: 460px;} } @media(max-width:590px){ .newmainslide {width:260px; height:260px; padding:12px;border:2px dotted rgba(255,255,255,0.2); box-shadow: 0 0 0 4px rgba(0,0,0,0.4);} .newmainslide h2 {font-size:28px; margin-top:72px!important; } .newmainslide h4 {margin:12px 0 16px; font-size:12px;line-height:120%!important;letter-spacing:1px!important;} .newmainslide .rmore1 {border-radius:28px; font-size:12px; padding:4px 12px; } .newmainslide .circleanim {width: 260px; height: 260px;} .current .newmainslide .circleanim:before, .current .newmainslide .circleanim:after { box-shadow: inset 6.6em 0 0 rgba(0, 0, 0, 0.3), inset 0 6.6em 0 rgba(0, 0, 0, 0.3), inset -6.6em 0 0 rgba(0, 0, 0, 0.3), inset 0 -6.6em 0 rgba(0, 0, 0, 0.3); } }
For more information on styling and configuring the K2 Content Module visit the full documentation HERE
