In my page i have 2 images that i want show one of them on the another one, this is my code, how can i set images:
<div class="profile-image img-responsive">
<img src="images/pro.png"/>
<img src="images/2.png" class="img-circle">
</div>
JSFIDDLE
I want to set 2.png onto the left and bottom pro.png like this:
How can I do this?
The following code will display the second image over the first image. All the images and the image panel are responsive.
1.CSS
.profile-img {
width: 100%;
position: relative;
}
.img-responsive {
max-width:100%;
height:auto;
}
.img-circle {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
2.HTML
<div class="profile-img">
<img class="img-responsive" src="images/pro.png" />
<img class="img-circle img-responsive" src="images/2.png" />
</div>
#bnuhero's answer is very good, and I would change it just a little.
First, basing off the jsfiddle, encapsulate the two images in a relative div. This will allow the image placed on top, when defined as "absolute" to be placed relative to the parent div, rather than relative to the entire window.
<div class="header-image">
<div class="profile-image" style="margin: 50px auto;">
<img src="http://s9.postimg.org/41fwo4k4v/pro.png" class="img-responsive"/>
<img src="http://s24.postimg.org/on764040x/image.png" class="img-circle img-responsive img-on-top">
</div>
</div>
</div>
Next, make a rule to define the realtive div. And make an additional class or id to target the image to be placed on top. Writing the rules with the same 'img-circle' class will interfere with the default 'img-circle' rules setup by Bootstrap
.header-image {
position:relative;
}
.img-on-top {
position:absolute;
z-index:99;
left:10px;
bottom:-50%;
}
Updated jsfiddle at http://jsfiddle.net/Bavc_Am/jG9bP/1/
Update your css to this
.img-circle {
border-radius: 50%;
position: relative;
top: -69px;
left: 10px;
}
Related
Actually I I created an Image Slider using HTML and CSS. And I wanted to create a popup box. So before adding the functonality I created a layout for it and tried to make it in center. So when I write position:relative; bottom:300px(or whatever)it goes up but hides behind the image Slider.
.popup{
width: 900px;
height: 500px;
background-color: white;
border: 5px solid black;
position: relative;
bottom:0px;
}
<div id="slider">
<figure>
<img src="img3.jpg">
<img src="3.JPG">
<img src="4.JPG">
<img src="img3.jpg">
<img src="9.jpg" alt="">
</figure>
</div>
<center>
<div class="popup">
Dummy Text
</div>
</center>
Use z-index to specify the element you want on top:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Simply set your position with absolute.
.box .text{
position: absolute;
}
Demo jsFiddle
I tried to position my logo and headerpic on top of each other like this:
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
But my logo is still at the top end of my header pic.
My css code looks like this:
.header img.headerpic {
max-width:100%;
float:left;
position:relative;
background:transparent url(../images/header.jpg)
}
.header img.logo {
position: relative;
float:left;
max-width:100%;
background:transparent url(../images/logo.png )
}
and i added this in my index.php:
<body id="home">
<!-- header area -->
<div class="header">
<id="logo">
<img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
<img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
<div class="infobox"><div class="inner">
</div>
</body>
What do i need to change that my Header-Picture is the background and my logo is on the left in the center of the Picture?
My actual view
position:absolute is relative to the nearest positioned parent, or the entire page. Therefore, here you are setting the images to be at the exact same location.
What you need is for .imgB1 to set position: relative and then move it to place with the top and others. E.g something like so:
#logo img {
position:absolute;
}
.header img.headerpic {
max-width:100%;
top: 10px;
left: 10px;
position: relative !important;
}
<div class="header" id="logo">
<img src="https://placehold.it/200/333333" alt="logo"/>
<img class="headerpic" src="https://placehold.it/100" alt="" />
<div class="infobox"><div class="inner">
</div>
I'm not actually tested this but, if it works thumbs up. I forget to complete my css classes and goes to php and not I have full knowledge of php
margin-left: 25%;
margin-top:25%;
Increase the z-index, case may be that your logo has more z index than img divs
If you want both images to stack on top of each other, what you need to do is to set header as relative and img to absolute like so:
.header{
position: relative;
}
.header img{
position: absolute;
}
<div class="header">
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
</div>
By setting both img.headerpic and img.logo to position:relative, both will occupy their own space and thus won't stack on top of each other.
By defining the parent's position as relative, in this case .header, anything inside .header with an img tag that's positioned absolute will occupy the same space, relative to the parent.
Hi i feel really stupid for asking this, I have a site that I am working on and I am trying to position my profile picture absolutely to a div with a position of relative, however it doesn't work and the parent div does not wrap around the img. I'm sure it's a simple solution. Does the parent div have to have a height and width?
.parent {
position: relative;
}
#profilepic {
position: absolute;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="Images/Portraits%20circle.png" alt="profile picture"/>
</a>
</div>
I have not made the changes to the live site yet but the issue can be replicated in the browser
EDIT Thank you for the help
I assume, you got something wrong there about absolute positioning of HTML elements.
By setting an element to position:absolute; you take it entirely out of the document flow. Therefore there is no kind of automatic wrapping around of any parant element. The only connection to the actual parent Element is that you might have that one set to position:relative so the coordinates of your absolutely positioned elements depend on the position and dimension of its parent.
Your Idea only works properly here, if you know exactly the size of the final image. Then you could use something like that: https://jsfiddle.net/k98cLdvq/
CSS for this looks like:
.parent {
position: relative;
border:1px solid #c00;
width:200px;
height:200px;
}
#profilepic {
position: absolute;
border:1px solid #0c0;
width:100px;
height:100px;
left:50px;
top:50px;
box-sizing:border-box;
}
By adding the following you would get the effect you described:
a:hover #profilepic{
width:120px;
height:120px;
left:40px;
top:40px;
}
You are going to have to set the width and height of the container to provide a big enough base for the image to sit on top of (the container will not wrap around it as the absolutely positioned image is out of the document flow and instead sits on top) - ensure you have position:relative on the container and presuming you want the image at top left then top:0 and left:0 on the image. I presume you are positioning absolutely for layering? If not I would question using absolute positioning given the extra complication of making the underlying container big enough.
When positioning absolutely, you should remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning
JS Fiddle
.parent {
position: relative;
background-color: green;
height: 150px;
width: 200px;
display: inline-block;
margin: 2px;
}
#profilepic {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.5s;
border: 2px solid navy;
}
#profilepic:hover {
width: 120%;
height: 115%;
z-index: 10;
transition: all 1s;
}
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image1" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image2" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image3" alt="profile picture" />
</a>
</div>
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="//placehold.it/200x150?text=image4" alt="profile picture" />
</a>
</div>
When setting the position properties, you're best off setting top/bottom and left/right to get the results you expect. But you shouldn't, as you've said above,
set the top and bottom to 0
Instead, you should set either the top or the bottom property because setting both properties will cause them to contradict each other and the browser is likely to ignore both or pick one depending on the implementation.
Try this out: https://jsfiddle.net/9vbojg0w/
HTML
<div class="parent">
<a href="https://uk.linkedin.com/pub/siavoush-redhai/a5/377/b02" target="_blank">
<img id="profilepic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Charles_Darwin_seated_crop.jpg/220px-Charles_Darwin_seated_crop.jpg"/>
</a>
</div>
CSS
/* background-color and width/height only for demonstration
* width/height can be removed if other elements cause the
* parent's size to expand
*/
.parent {
position: relative;
background-color:#ddd;
width:200px;
height:300px;
}
#profilepic {
position: absolute;
top:20px;
left:20px;
}
I'm new to HTML and CSS. For one of my projects, I need to put 16 images into a 4x4 grid of tiles on a webpage. These tiles cannot have gaps between them, and they need to stretch to fill the browser from side to side. They also should only scroll vertically. We are only allowed to use JavaScript or JQuery so I can only use HTML and CSS.
I wrote 4 div elements, each represents a row; inside each div, a span element holds 4 images - that's how I made the 4x4 grid. A code snippet looks like this:
/* One row in a div*/
<div class="map">
<span>
<img src="map_images/1.png">
<img src="map_images/2.png">
<img src="map_images/3.png">
<img src="map_images/4.png">
</span>
</div>
I also wrote a navigation bar that should float above the background images in the upper right corner:
/* 4 div elements of 4 rows before this code*/
<div id="nav">
<div>Foo</div>
<div>Boo</div>
</div>
For the above code, my stylesheet looks like this:
.map{
margin:0;
padding:0;
}
#nav {
position: absolute;
top: 0;
right: 0;
z-index: 10;
}
However, I've encountered several problems at this point.
First, I still have column gaps and row gaps between all 16 images. No matter what values I set map margin and padding to, nothing changes. I even tried negative values, still nothing changed. Can someone tell me how to go about this problem, eliminating all gaps?
Secondly, I googled and learned that z-index can be used to make div float above background; however, this is no working here and it seems that div #nav stays in the upper right corner as a separate div that does take up space, instead of floating above. Any suggestions on this?
Float left and set the width to 25%. Also I show below how to create a floating menu using the :hover pseudo-class.
.map div img {
width: 25%;
float:left;
display: inline-block;
}
#nav {
width: 50px;
background-color: grey;
}
#nav ul {
margin: 0;
padding: 0;
width: 50px;
background-color: grey;
position: absolute;
display:none;
}
#nav:hover ul, #nav ul:hover {
display:block;
}
<div id="nav">
Menu
<ul>
<li>Foo</li>
<li>Boo</li>
</ul>
</div>
<div class="map">
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
<div class="row">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
</div>
</div>
I think you are looking for something like this? See fiddle http://jsfiddle.net/DIRTY_SMITH/q12bh4se/4/
Snippet :
body {
margin: 0px;
}
div {
width: 50%;
float: left;
}
img {
width: 50%;
float: left;
}
.top-left {
z-index: 9999;
position: absolute;
top: 0;
left: 0;
color: white;
}
.top-right {
z-index: 9999;
position: absolute;
top: 0;
right: 0;
color: white;
}
<h1 class="top-left">Top Left</h1>
<h1 class="top-right">Top Right</h1>
<div class="row-1-col-1">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-1-col-2">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-2-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
<div class="row-3-col-3">
<img src="http://lorempixel.com/g/200/200/">
<img src="http://lorempixel.com/200/200/sports/">
<img src="http://lorempixel.com/200/200/sports/1/">
<img src="http://lorempixel.com/200/200/sports/Dummy-Text/">
</div>
All I had to do was set float: left and width: 25% on the images in CSS
.map img{
float: left;
width: 25%;
}
DEMO
In the following HTML, I want the small delete icon to appear in the upper left corner of its container (the div). The larger image (a cat) needs to be inside of the div and scale so that it does not exceed the height of the div. I need the div to float left because of how its used elsewhere. The delete icon is suppose to overlay on top of the larger image (if the larger image fills the width of the div). Please note, that the larger image may actually have a width that is much less than the div and it gets centered in the div. In this case, the delete icon, still is in the upper left corner but is not really overlaying on top of the larger image since the larger image would be too small. The width of the div always remains the same regardless of the width of the larger image.
Here is my html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
And in fiddler:
http://jsfiddle.net/AndroidDev/eJZ7X/
Do you need something like this?
Demo
div {
position: relative;
}
div img {
max-width: 100%;
max-height: 100%;
}
div img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
Here, am positioning the delete img to absolute with top and right properties, if you want left than you can do that too, and make sure you wrap them inside a position: relative; container.
Note: Am using first-of-type pseudo so you do not have to alter your
DOM, but if you think that the order of the img might change than
better assign a class to the delete img instead.
As you feel my selectors are too generic, assume that you have a parent with a class called .img_holder and this will have div nested further and than you nest both the img inside that so your selector will be
.img_holder > div {
position: relative;
}
.img_holder > div > img {
max-width: 100%;
max-height: 100%;
}
.img_holder > div > img:first-of-type {
position: absolute;
top: 5px;
right: 5px;
}
And the DOM would look like
<div class="img_holder">
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
<div>
<img src="#" />
<img src="#" />
</div>
</div>
I've updated your fiddle here
The icon img now has an icon class and is absolute positioned in the div.
html:
<div style="float:left; width:120px; height:90px; text-align:center; border:1px solid #c0c0c0">
<img class="icon" src="http://hellopune.mobi/site2/Images/icon_delete.png" />
<img src="http://www.petfinder.com/wp-content/uploads/2012/11/100691619-what-is-cat-fostering-632x475.jpg" style="height:90px" />
</div>
css:
.icon {
position: absolute;
}