I want to put one Image over other Image.
Following is my code :
<div style="position: relative; left: 0; top: 0;">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
css :
#image1
{
top: 0; left: 0;
position:relative;
z-index:2;
}
#image2
{
position:relative; left:-70;
z-index:1;
}
fiddle for that
I want that when I make width or height increase of second image it also increase of first automatically. I want to put image 2 over image 1.
Any Guidance Please.
You may use margin-left in #image2
#image1 {
top: 0; left: 0;
position:relative;
z-index:2; }
#image2 {
position:relative; left:-70px;
z-index:1;
margin-left: 25px;
}
Check the fiddle: http://jsfiddle.net/r5JMM/5/ for your answer
#image1{position:absolute;}
#image2{position:absolute;resize:both;}
.container{position:relative;}
<div class="container">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
You can use jquery resize for doing resize operations on images
Related
I'm trying to put image number 3 at the bottom of the page, but it doesn't work. I used position fix and sticky too but it doesn't work too.
.boxes {
position: absolute;
}
.downa {
position: relative;
margin-bottom: 0;
bottom: 0;
left: 0px;
}
.topa {
position: relative;
top: 0px;
left: 0px;
}
<div class="boxes">
<center>
<img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
</center>
<center>
<img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
</center>
</div>
How can I put image number 3 at the bottom of the page?
Add a class to the parent of the "3" image (like ".foo") than impose the "fixed" propriety:
.boxes{
position:absolute;
}
.downa{
position:relative;
margin-bottom: 0;
bottom: 0;
left: 0px;
}
.topa{
position:relative;
top:0px;
left: 0px;
}
.foo {
position:fixed;
bottom:0
}
<div class="boxes">
<center>
<img class="topa" height="50" src="http://www.clker.com/cliparts/V/1/Y/3/j/Z/blue-number-1-md.png" width="50" />
</center>
<center class="foo">
<img class="downa" height="50" src="http://www.clker.com/cliparts/g/b/d/Y/s/2/blue-number-3-md.png" width="50" />
</center>
</div>
http://jsfiddle.net/u6Lg9tns/
I am supposing you are looking for a sticky footer; if you want a positioning based on the actual height of parent element only; you should use Javascript (or, more likely JQuery) to check the actual size of the element (if dynamic) and set the proper value for positioning...
Try this .boxes{position:relative;} .downa{position:absolute; bottom:0;left:0px; } .topa{position:absolute;top:0px;left:0px;}
My html:
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>
My css:
.wrapper {
margin: 0;
padding: 0;
}
.scale-img {
transform: scale(0.5);
transform-origin: top left;
}
In my page I have several imgs, and each of the img's size is different, I don't want to set size in css for each img, and I just want to scale each img to half of its original size. But the wrapper div stay the img its original size, I don't know where go wrong?
Try this... For better understanding, I have used a dummy image.
.wrapper {
margin: 0;
padding: 0;
border: 1px solid #000;
position:absolute;
}
.scale-img{
width:100px;
height:100px;
position: relative;
}
<div class="wrapper">
<img class="scale-img" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="my img" />
</div>
The reason transform doesn't affect the parent is because it "modifies the coordinate space of the CSS visual formatting model".
So in effect, it's sort of like doing this:
#container {
height:200px;
width:200px;
border:1px solid;
position:relative;
}
#container span {
background:red;
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
<div id="container">
<span></span>
</div>
In an attempt to fix your issue, you'll more than likely need a bit of JavaScript:
var objScaleIMGs = document.querySelectorAll('img.scale-img') // Grab all the images that need scaling.
for (var i = 0; i < objScaleIMGs.length; i++) { // Loop through all the images, setting their dimensions half of what they currently are.
var h = objScaleIMGs[i].height;
var w = objScaleIMGs[i].width;
objScaleIMGs[i].height = h / 2;
objScaleIMGs[i].width = w / 2;
}
.wrapper {
margin: 0;
padding: 0;
border: 1px solid;
float: left;
}
.scale-img {
float: left;
}
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>
You should transform the wrapper instead if you want to change the div's size with the change in img original size. The reason being that scale is used for img and not for wrapper div.
.wrapper {
margin: 0;
padding: 0;
height: 960px;
width: 540px;
}
.scale-img {
height:100%;
width:100%
}
You should refer: CSS Transform with element resizing
The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn't change its actual pixel size in DOM. Because of that I don't think that CSS-only solution exist.
Hi i have an <hr> line stretching across the page, but I think it keeps getting cut off by an image above it. Does anyone know how I could make it so that the <hr> line overlaps the image?
<img src=".\pncwelcome.png"
style="float:right; clear:right; margin-top:-40px;"
alt="PNC Welcome Logo"/>
<hr color="black"
style="margin-top:30px;" />
Use position: absolute;.
Check the fiddle.
Something like this should work.
The CSS:
.parent {
position: relative;
}
img {
width: 200px;
}
hr {
position: absolute;
z-index: 50;
top: 30px;
right: 0;
left: 0;
}
HTML:
<div class="parent">
<hr>
<img src="http://fanumusic.com/wp-content/uploads/2012/10/Free.jpg">
</div>
Use Z-index. In the css if you set the hr to a higher z-index value it will be layered over the image. Or since you're floating the image, float the hr too and then set a higher z-index
on it so that it will still overlap the image.
If you float the <hr> you will have to set a width on the parent element.
Use:
<img src=".\pncwelcome.png" style="z-index: 1; float:right; clear:right; margin-top:-40px;" alt="PNC Welcome Logo"/>
<hr color="black" style="z-index: 2; margin-top:30px;" />
If that doesnt' solve it use this instead:
<img src="http://placekitten.com/g/200/300" style="float:right; clear:right; margin-top:-40px; z-index:1;" alt="PNC Welcome Logo"/>
<hr color="black" style="float: left; z-index: 2; margin-top:-30px; width: 100%;" />
Building off of Savas's answer, as I experienced some rendering issues when the <img> was not also given absolute positioning...
Here is how one would create an <hr> with a graphical embellishment. The <div> is sized to the graphic being used and everything is treated like a single, spatially-defined unit on the page:
#example {
display: block;
position: relative;
width: 100%;
height: 92px;
}
#example hr {
position: absolute;
z-index: 0;
top: 46px;
bottom: 46px;
margin: 0px;
width: 100%;
border: 5px solid #8fcbf1;
}
#example img {
position: absolute;
width: 272px;
height: 92px;
z-index: 5;
left: calc(50% - 136px);
}
<div id="example">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" />
<hr />
</div>
Here is the Fiddle: https://jsfiddle.net/z517fkjx/
Also, this uses calc() for centering, which is CSS3-only.
I have read a bunch of forums on this but none have solved my problem. I'm sure its something small I'm missing
Here is iscroll initialization:
// make PI scroll
piScroll2 = new iScroll('pi_scroll2');
Here is my css:
.pi_panel.large .content{
position: absolute;
width: 963px;
height: 616px;
top: 65px;
left:30px;
background:none;
/*background:url(../images/ISI_body.png) repeat-y;*/
overflow:scroll;
-webkit-border-radius: 0px;
}
#FullPiWrapper
{
position:relative;
z-index: 1;
overflow:hidden;
top: 60px;
width:980px;
height: 610px;
}
.pi_panel .pi_box{
padding: 0px;
margin: 20px 0px;
}
Here is my html:
<!-- BEGIN: PI PANEL LARGE -->
<div class="pi_panel large">
<div class="topBarPiFull">
<div class="title">Full Prescribing Information</div>
<div class="close_button_fullpi">Close</div>
<div class="annotated_pi_button">Annotated PI</div>
</div>
<!-- <div class="popContent"></div>-->
<div class="content" id="FullPiWrapper">
<div id="pi_scroll2">
<div class="pi_box" >
<img src="_globals/images/PI/pi_1.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_2.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_3.png"/>
<img src="_globals/images/PI/pagebreak.png"/>
<img src="_globals/images/PI/pi_4.png"/>
<img src="_globals/images/PI/pagebreak.png"/>
<img src="_globals/images/PI/pi_5.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_6.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_7.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_8.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_9.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_10.png"/>
</div>
</div>
</div>
</div>
<!-- END: PI PANEL LARGE -->
Issue was, you cannot have ANY parent's div class display set to 'none' when the page first loads. So I set 'pi_panel large' to display: 'block';
Make sure that the container's height exceeds the wrapper's height i.e. don't make height:100%. For example, if the wrapper contains a container, and there are 10 divs in the container:
If Each of the divs is 100px the wrapper might be 150px. Then Container has to be 1000px (not 100% !)
give a height to your wrapper, it just worked for me.
.wrapper1 {
position:absolute; z-index:1;
top:250px; bottom:0px; left:3%;
margin-left:25px;
width:100%;
background:none;
overflow:auto;
height:100px;
}
To get around the "div display none" issue, do the following after loading the data in your grid, div, etc:
myScroll.refresh();
myScroll.scrollTo(0, 0, 1000);
Where myScroll has been loaded:
var myScroll = new iScroll('friendsWrapperDrug', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });
myScroll.refresh();
myScroll.scrollTo(0, 0, 0);
This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.
Following is the CSS which finally fixed this issue for me:
#productsScreen{ /* my container */
height: 99%;
z-index: 1;
top: 0px;
left: 0;
overflow: auto;
}
#productListWrapper{
background:transparent;
position:absolute;
z-index:1;
top: 88px;
bottom:49px;
left:0;
width:100%;
overflow:auto;
}
#productsListScroller {
position:absolute; z-index:1;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Hope that helps!
Another solution that works for me is wrapping iScroll init function with setTimeout. This will give some time for the browser to render the element before iScroll is applied.
I'm trying to get a transparent png frame image to hover over an img tag to create the look of a frame over it. I've tried multiple different approaches and none seem to work.
The latest method I used was http://www.cssbakery.com/2009/06/background-image.html this doesn't seem to work either.
HTML
<div class="filler">
<div class="filler-picture">
<img src="../../media/img/test.jpg" alt="test" />
<div class="filler-mask"> </div>
</div>
</div>
CSS
.filler {
padding-left:20px;
height:361px;
width:559px;
float:left;
}
.filler-mask {
background: url('..img/filler.png') no-repeat;
position: absolute;
left:0; top:0;
height:361px;
width:559px;
}
.filler-picture {
z-index: 0;
background: url('..img/test.jpg') no-repeat;
position: relative;
height: 361px;
width: 559px;
display: block;
}
Does anyone have any idea why this isn't working.
you could put 2 absolute divs under filler-picture with different z-index
<div class="filler">
<div class="filler-picture">
<div class="filler-img">
<img src="../../media/img/test.jpg" alt="test" />
</div>
<div class="filler-mask">
<img src="../../media/img/filler.png" alt="filler" />
</div>
</div>
</div>
CSS
.filler-mask {
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 900;
}
.filler-img{
position: absolute;
left:0; top:0;
height:361px;
width:559px;
z-index: 50;
}
instead of using the image as a background you could put the image directly but images don't follow z-index so you have to wrap the images in divs.
Since the original question referenced a post on my blog, I decided to write an update to my Cookie Cutter Method using Neil's markup as an example.