CODEWITHSUNDEEP
htmlcssiframe
Josiah
Josiah

Reputation: 4783

Aligning an iFrame's left edge to -100?

I have an iframe placed in my body. However, I want to align it's left edge to -100px normally, and then on hover move it to 0px. However, I can find no way to do this. I tried using CSS:

.cnetBox {
    left:-100px;
    width:200px;
    height:200px;
    opacity:.5;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

    .cnetBox:hover {
        left:0px;
        width:90%;
        height:500px;
        opacity:1;
    }

And then in the body:

<iframe src="http://www.cnet.com" height="200" width="200" class="cnetBox">
  <p>Your browser does not support iframes.</p>
</iframe>

But nothing happens. The iframe is still aligned only ever to the left edge at 0px. How can I set the left edge to -100px? Thanks.

Upvotes: 1

Views: 499

Answers (3)

CherryFlavourPez
CherryFlavourPez

Reputation: 7497

You just need to add position: relative to your .cnetBox.

Your iframe (like all other elements) has it's position as static by default, and so providing any position values will have no effect. This CSS Tricks article does a good job of explaining the differences without getting too verbose.

Alternatively, if for some reason you need the iframe to remain static, then swap left for margin-left and you'll achieve pretty much the same thing.

Upvotes: 2

Pandian
Pandian

Reputation: 9126

Add position:absolute; to your .cnetBox CSS

Fiddle : http://jsfiddle.net/RYh7U/101/

Upvotes: 2

Chris Baker
Chris Baker

Reputation: 50592

In order for the CSS left, top, etc to affect the position of an element, it must have a position set.

Depending on the structure of your HTML, you'll want a value of relative or absolute

Check it out here: http://jsfiddle.net/VAqTt/

Documentation and Related Reading

Upvotes: 2

Related Questions