I want to align images like shown in the Aligned Images link at the bottom of the website. I just mean that I want to place many movies dvd covers on the bottom of the page so it becomes easy to access any movies directly. So if someone hover the movie Blast than it will pop up. Can anyone help me out.
img {
position: absolute;
bottom: 0;
}
And a fiddle: http://jsfiddle.net/dwtp7pje/
Note that if you put the image inside of another div, you need to assign that div a position: relative; for it to work.
Edit: if you're looking to place several images at the bottom, place the images in a div like this:
<div>
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
<img src="http://orig12.deviantart.net/2b79/f/2008/314/e/8/my___dark_knight___dvd_cover_by_esbe77.jpg" alt="">
</div>
with css:
div {
position: absolute;
bottom: 0;
}
img {
max-width: 33%;
}
And the fiddle: http://jsfiddle.net/dwtp7pje/1/
this is in css
.fix{
position:fixed;
bottom:0px;
}
and your html
<img src="yourimagepath" class="fix"/>
absolute: An absolutely positioned based on its nearest relatively positioned parent element.
fixed: Fixed elements are completely independent on the web page. Regardless of any parents, a fixed position element will always be fixed at a point based on the window of browser
Try the following code.
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;">
Update:
<img src="http://i.imgur.com/KjuqA1l.png" style="position:fixed;bottom:0px;max-width:100%;">
Related
I want to have an image link at the lower left side of my webpage. I am able to get the link to work but the entire space within the padding is also part of the link. So there is pretty much a big 800px by 800px link on my page when I only want the image itself to be a clickable link. Also, the position needs to be absolute because of the way the entire page is set up. Would anybody be able to tell me now to fix this?
<div id="image_link">
<a href="#">
<img id="image_id" src="../path/image">
</a>
</div>
<style>
#image_link {
padding: 800px 0px 0px 800px;
position: absolute;
}
</style>
It's strange that it creates 800x800 pixels link area for you. padding on the div adds space inside the div, but outside the a, so it shouldn't make the a element larger.
But as you're already using position: absolute;, you should really use top, right, bottom and left to control the position. And it's recommended to set it on the img element directly.
#image_id {
position: absolute;
top: 800px;
left: 800px;
}
I'm trying to make "meme"-looking captioned images with CSS using an <img> object and two <p> objects styled with CSS. Right now I have a <div> which contains the <img> and then the two <p>'s. What I want to do is have the picture positioned in the top-left corner of the div and then I set the z-index to -1 and THEN somehow position the two p objects over the image but positioned relative to the top-left corner of the div.
This is so I can set the top: y and left: x values of the p objects such that they will be positioned accordingly relative to the top-left of the div and in turn the image.
But when I try to set position: relative for the p objects there's a problem where the first p is correctly placed but the 2nd p is positioned relative to the first one so even though it's at top: 0, left: 0 it's still lower than it should be.
How can I fix this?
check out this jsfiddle:
http://jsfiddle.net/56J8y/1/
relevant CSS
.meme_container {
position: relative;
}
.meme_container .top_meme {
position:absolute;
top:0;
left:0;
}
.meme_container .bottom_meme {
position:absolute;
bottom:0;
left:0;
}
and the html
<div class="meme_container">
<img src="https://www.google.com/images/srpr/logo3w.png"/>
<p class="top_meme">This is a caption 1</p>
<p class="bottom_meme">This is a caption 2</p>
</div>
One way is to use Pseudo element like :after and :before
Example:
img:after {
content: "Hello, I am the caption";
}
I think you are talking about this situation:
<div>
<img />
<p class="first">caption1</p>
<p class="second">caption2</p>
</div>
Then to do what you want you need to set the positioning of the div to something (relative will generaly not affect your behaviour so its a good choise). Once that is done postioning absolute can be used inside. Absolute refers to the next higher positioned element!!
div{position:relative};
p{position:absolute};
p.first{top:10px};
p.second{top:20px};
I need to position elements and receive like in attached image
I have a page where all elements are inside MainDiv. There are 2 images.
I would wondering if somebody showed my html + css should be.
thanks in advance!
A possible way would be to set the position of the overlayed image to absolute:
#overlayImage{
position:absolute;
right:0px;
bottom:0px;
width:150px;
height:150px;
}
Important is, that the position of the main div is not "static".
<div id="main_div">
<div id="other div"> </di>
<div id="overlayImage"> </div>
</div
you can accomplish this the following way: assign the background image as background to the main div
background: url(some/url/to/image) no-repeat scroll top right transparent;
then add a normal image element inside that div and position it absolute with the folllowing css
right: 0;
bottom:0;
position: absolute;
make sure the main div has position set to relative
I am having trouble positioning a corner image on to of an image. The span which have an little background image should be in the top left corner on top of the image.
Here is my code:
<div id="wrapkon">
<span style="width: 4px; height: 30px;display:block;position:absolute;top:0px;left:0px; background-color:#000;background: url(../images/konboxleft.png) no-repeat;"></span>
<a target="_blank" href="/link/11"><img style="width:125px; height:125px;" src="image.jpg" alt="21883"></a>
div>
Have a look here: http://jsfiddle.net/jdmiller82/F8ZPG/
You need to set a position relative to your #wrapkon.
also, top and left values should not be in px.
When you use position: absolute;, you need position: relative; on the parent.
You should give your <div id="wrapkon"> a position: relative style.
Check to make sure wrapkon has position: relative on itself, or the span which you have absolutely positioned will not appear inside it. See this: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
How to put text over images in HTML. Everytime I enter the below code, the text goes under the image.
<img src="example.jpg">Text</img>
You can create a div with the exact same size as the image.
<div class="imageContainer">Some Text</div>
use the css background-image property to show the image
.imageContainer {
width:200px;
height:200px;
background-image: url(locationoftheimage);
}
more here
note: this slichtly tampers the semantics of your document. If needed use javascript to inject the div in the place of a real image.
You need to use absolutely-positioned CSS over a relatively-positioned img tag. The article Text Blocks Over Image gives a step-by-step example for placing text over an image.
The <img> element is empty — it doesn't have an end tag.
If the image is a background image, use CSS. If it is a content image, then set position: relative on a container, then absolutely position the image and/or text within it.
You can try this...
<div class="image">
<img src="" alt="" />
<h2>Text you want to display over the image</h2>
</div>
CSS
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Using absolute as position is not responsive + mobile friendly. I would suggest using a div with a background-image and then placing text in the div will place text over the image. Depending on your html, you might need to use height with vh value