Difficulties Transferring code into OP

Bortas
Bortas

Good morning!

I'm trying to input a bit of my own code into OP. I plug in my CSS, create a new page, click the 'source' button for the editor, paste in my html, click the 'source' button again, and it looks just like I want it to. I save the edits, and the page looks nothing at all like I've planned. I have a feeling it has to do with CSS specificity, which I really struggle with.

Any experts care to lend a hand? FYI: it is webkit based code, which means Chrome/Safari but not firefox.

Code in action in real world: http://bortas.net/test.html

Code in action on OP: https://bortstester.obsidianportal.com/

HTML:


<ul id="posters">
<li>
<img src="https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/634547/Poster_-_Amalia.jpg"; alt="Amalia" width="275"/>
<div class="poster_info">
<h3>Amalia Siannodel</h3>
<p align="justify">Mystic elven archer from the village of Ornthalas, deep in the Eldur Mountains.</p>
<a href="http://morwindl.obsidianportal.com/characters/amalia"; title="Amalia">More info</a>
</div>
</li>
</ul>

CSS:


/* BEGIN Posters */
/* Basic list things. */
#posters
{ list-style:none; margin:100px 0; height:550px; }

/* List items. Take note of the -perspective property. We assign the transform-style to make the info element tranform correctly with the parent. transition is used for animation. */
#posters li
{ display:inline; float:left;
-webkit-perspective: 500; -webkit-transform-style: preserve-3d;
-webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }

/* When hovering, we change the perspective. Since this property is defined in the transition, it'll animate accordingly. */
#posters li:hover
{ -webkit-perspective: 5000; }

/* We use the tranform property to enhance the 3d effect, making it rotated. We also add some shadows here, just to add even more depth. Also, for the image, we capture the rotateY event to be animated (transition) */
#posters li img
{ border:5px solid #fcfafa; -webkit-transform: rotateY(30deg); z-index:999;
-moz-box-shadow:0 3px 10px rgba(0,0,0,0.5); -webkit-box-shadow:0 3px 10px rgba(0,0,0,0.5);
-webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }

/* Rotate back when hovering the parent element */
#posters li:hover img
{ -webkit-transform: rotateY(0deg); }

/* Poster info box specifications */
.poster_info {
margin:-195px 0 0 55px;
padding:20px;
width:200px;
height:180px;
position:absolute;
background: #fffaaa;
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/424298/parch3.jpg');
background-size: 100% 100%;
box-shadow:0 20px 40px 2px rgba(0,0,0,0.5);
-webkit-transform: translateZ(30px) rotateY(30deg);
-webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s;
z-index: 100;}

/* Animate everything to their 2d state when hovering the parent. */
#posters li:hover .poster_info {
-webkit-transform: rotateY(0deg); box-shadow:0 10px 20px 1px rgba(0,0,0,0.5);
margin:-175px 0 0 30px;
}

/* Some basic CSS for the poster info */
.poster_info h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }
.poster_info p { padding-bottom:15px; }
.poster_info a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; text-align:center; margin:0 auto;
-moz-border-radius:5px; -webkit-border-radius:5px; }
.poster_info a:hover, .poster_info a:focus { background-color:#6a191f; color:#fff; }

/* END Posters */

Thanks for any help you can provide,

-bort

Comments

Sign In or Register to comment.

Campaign of the Month
September 2021

D&D 3.0: Tales from Mystara


Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions