CODEWITHSUNDEEP
htmlcssresponsive-design
Abby Fichtner
Abby Fichtner

Reputation: 2648

How do I place text to the right of a relatively positioned image?

I have an image that's relatively positioned so that I can do a css mouseover effect on it (when you mouseover it, it changes the image). It's a responsive design so the image can grow or shrink based on the screen size.

I want to display text immediately to the right of this image. Can anyone show me how to do that?

Here's my code now - the text ends up displaying behind (rather than beside) the image. Thanks!

CSS (changes image on mouse-over):

#mypic {
  position:relative;
  max-width:100%;
}

#mypic img {
  position:absolute;
  left:0;
  opacity:1;
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}

#mypic img.top:hover {
  opacity:0;
}

HTML:

<div id="mypic"><img class="bottom" src="bottom.jpg" /><img class="top" src="top.jpg" /></div>
<p>Here is text that should be displayed to the right of the image.</p>

Upvotes: 0

Views: 46

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

Is this what you are looking for http://jsfiddle.net/DIRTY_SMITH/a0my545L/1/

I set the width of the <div> to 400px; then floated your text left with a margin left of 400px;

Upvotes: 1

Related Questions