I'm trying to figure out how to overlay a div on top of an image.
Here's what I've got so far, I'm totally stuck and have been for a while.
http://wilwaldon.com/learning/slideshow.html
Any help would be greatly appreciated, thank you in advance.
Try adding position:absolute; on the overlay. You might also want to add background:transparent if you want the image to show through.
<style type="text/css">
.image{
position:relative;
width:1001px;
height:257px;
}
.overlay{
position:absolute;
left:0;
bottom:0;
width: 300px;
background-color: #fff;
z-index: 600;
}
</style>
Changes from original:
Add dimensions of the image to the container, and set its position to relative
Set overlay position to absolute and position it by top/bottom and left/right properties
You could set the image as the background of your Div.
background-image: url (blahblahblah);
Related
I have a div container where i want to put two images, one above the other, where the only visible image will be the one checked. I give my container position:relative and my imgs position:absolute;, so it will be absolute in relation to the container. But instead, all the content of the figure tag are going away from the container, and i don't know why.
Here's what i have: https://jsfiddle.net/rckecf2b/1/
If I understand you correctly, you need to have the div have the absolute position and the images relative to the parent, like so
When something has an absolute position, it ignores other set positions. If you want to have the positions seem absolute within a div, you need them to be relative
#container-fim-ap{
border:solid 5px #ABB7B7;
width:50%;
word-wrap:break-word;
border-radius:2%;
/*visibility: hidden;*/
position:absolute;
height:auto;
}
#container-fim-ap figure{
position: relative;
left:0;
}
https://jsfiddle.net/rckecf2b/3/
play around with it a little
Well it turns out that givin' height:200px to #container-fim-ap solved the problem.
#container-fim-ap{
border:solid 5px #ABB7B7;
width:80%;
word-wrap:break-word;
border-radius:2%;
/*visibility: hidden;*/
position:relative;
height: 200px;
http://jsfiddle.net/rckecf2b/2/ Thanks for the help everybody.
Pretty cut and dry question... Not big on HTML but trying to get the button, like in the example below, center on top of the bootstrap carousel. Sadly I got to use the button tag.
http://www.codeply.com/go/RY7yBxnnNj
.centerbutton {
margin: 0 auto;
background-color: transparent;
text-align: center;
position:absolute;
z-index:50;
top:50%;
left:50%;
margin-top:-23px;
margin-left:-50px;
}
Please note:
adjust margin-top to half the button's height
adjust margin-left to half the button's width
it will position to the first relative parent
if you pass your mouse over the image on this jsfiddle, it does not overlap the text around it.
pretty dumb question, but i am very confused, could someone help me?
http://jsfiddle.net/wdhf2/
the image has this css:
.img {
height:30px;
-webkit-transition-duration:0.5s;
transition-duration:0.5s;
margin-bottom:0px;
margin-right:0px;
z-index:100000000;
}
.img:hover {
height:300px;
margin-bottom:-270px;
margin-right:-270px;
}
z-index can be applied only to positioned elements. Here's a fiddle with an image covering all the text after it has been positioned absolutely: http://jsfiddle.net/hb8f2/. Using position: relative or position: fixed also allows application of z-index.
.img {
position: absolute;
}
I am trying to make a footer/navigation fixed to the bottom right corner of the screen so when you scroll down it will always be visible, and when you pull the bottom right of the browser to make it bigger it will stay fixed in the corner. I would also like it to scale smaller when you make the browser smaller. I've figured a way to do this in the top left corner but not the right.
I have tried
position:fixed;
bottom:0;
right:0:
however this doesn't seem to be working. I am left with a mysterious space between the edge of the page and my image (http://i.imgur.com/FZoaLd0.jpg) (doing a negative margin on the div does not erase this space) I also do not want to affix this as a background image because I eventually want to make it an image map.
sorry if this is confusing! I am still a newb at this.
<div id="footer">
<img src= "images/swirlfooter.png" width="75%" height="75%">
</div>
is the width and height the culprit of the space? if so how would i fix that? just create the image in the exact size i need it to be?
First, you need a fixed position, if you don't want it to move while scrolling.
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
padding:0;
width:75%;
}
#footer img {width:100%;}
And to clear the margins :
html, body {
margin:0;
padding:0;
}
Be careful, the position:fixed, unfortunatly doesn't work with safari on iOS (iPhones, iPads...)
You can see a demo here.
Edit
Another solution is to put the img in background of the footer, like this example :
#footer {
position:fixed;
right:0;
bottom:0;
margin:0;
width:75%;
height:75%;
background:url(http://i.imgur.com/FZoaLd0.jpg) no-repeat bottom right;
background-size:100%;
}
Position absolute will move with scroll. What you need is positon:fixed;
#footer {
position:fixed;
bottom:0;
right:0:
}
You need position: fixed;.
You also might want to try clearing the body and HTML margins:
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
Is it withing any parent containers that have position set to position: relative;?
Use
position:fixed;
Instead of absolute.
Fixed will keep it always at the bottom right of the window.
Absolute changes as you scroll.
HTML:
<div class="class-name">
<img src="images/image-name.png">
</div>
CSS:
div.class-name {
position: fixed;
margin-top: -50px;
top: 100%;
left: 100%;
margin-left: -120px;
z-index: 11000;
}
div.class-name img{
width: 100px;
}
Change margin-top according to your image height.
The image of the young lady on the following page:
http://secretgenius.co.uk/document/document_index.html
needs to move to the bottom of the page if the content to the right is longer. You can see in the above URL that she is floating above the footer line, but I would like her to always appear on the footer line no matter how much content is to the right. I am using the 960.gs grid for this site.
Thanks for any help.
Use position:relative on the image parent container, and position:absolute; bottom:0; left:0 on the image
Add vertical-align: bottom on the img tag
Screenshot:
#mainFooter{ background: url(../images/footerbg.png) repeat-x left bottom; bottom:0px; width: 100%; position:fixed; }
#footer { position: relative; margin: 0 auto; padding:10px 0; }
try these settings & if any prior settings of css.
mainFooter: for img
& footer: for text bellow img