embed div in img?

Is it possible to embed or overlay a div on an img element?
The div is a photo carousel and I would like to overlay it
on a section of the image. How can I do this?
pillmillAsked:
Who is Participating?
 
DesignbyonyxCommented:
You have to play around with the css a little.  This should center the carousel over the image:

.wrapper {
      float: left;
    position: relative;
      overflow: hidden;
}

.wrapper .carousel {
    position: absolute;
    top: 50%;
    left: 50%;
      width: 200px;
      height: 200px;
      margin-top: -100px;
      margin-left: -100px;
}
0
 
DesignbyonyxCommented:
<div class="wrapper">
  <img src="/path/to/img.jpg" atl="" />
  <div class="carousel">...</div>
</div>

.wrapper {
    position: relative;
}

.wrapper .carousel {
    position: absolute;
    bottom: 0;
    left: 0;
}
0
 
pillmillAuthor Commented:
Thanks. The carousel appears below the image and the text of \
.wrapper .carousel ... appears in the page.

Is there a way to overlay the carousel on the image or to position
at the side of the image?
0
 
pillmillAuthor Commented:
Thanks. How do you make the carousel div
appear on top of the image? Now, it is obscured
below the picture. The image is a png.
0
 
DesignbyonyxCommented:
My code has been tested and works on my end.  Can you please provide a URL or code so I can see what the problem is?  Thx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.