I am making a simple reactjs app where I need to put a button over image.
My html looks like:
<div className={"panel-body"}>
<img className={"img-responsive center-block"}
src={album.photos.data[0].source} />
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
Its all fine except button is shown below the image.
But I want to show the button over the image or in the middle of the div
How can I make this work ?
make button position relative and use z-index: maybe it will be helpful for you.
If you want to center the button in a div, while there is a background image to the div. I would suggest, to assign a background image for the div, rather than inserting an image into the div. Check out the fiddle:
http://jsfiddle.net/49s505sa/1/
HTML:
<div id="wrapper">
<button type="button">Your Button</button>
</div>
CSS:
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}
button {
height: 20px;
position: relative;
margin: -20px -50px;
width: 100px;
top: 50%;
left: 50%;
}
So, inside the render method
var style = {
backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
In this way, we will dynamically assign images to particular divs. And wont have to worry too much about styling.
Hope that helps!
Use z-index properties
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).. Note: z-index only works on
positioned elements
(position:absolute, position:relative, or position:fixed).
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 10;
}
Related
I want to display a div(with className='invoice-info') on hover of the icon(which is in table cell) like this:
<div
style={{ position: "relative" }}
onMouseEnter={() => setHoveredInvoiceId(result.gsCustomersID)}
onMouseLeave={() => setHoveredInvoiceId()} >
<i className="icon-container invoice-icon" id={"csInvoiceIcon" +
result.gsCustomersID}></i>
<div className="invoice-info">Hello</div> //this is displayed conditionally
</div>
I wrote some styles for the div like this:
.invoice-info {
position: absolute;
background-color: red;
width: 10vw;
height: 10vh;
z-index: 10;
left: 1em;
bottom: -6em;
}
But due to the width of table-cell is small enough to fit only icon, the div is hidden. I gave z-index to make it float but it is not working. I want a floating div on hover. Could someone help me?
Invoice cell has overflow:hidden property. It worked after changing it to overflow:visible
You can use CSS instead of JS that will have some performance gain.
you can use something like this:
.invoice-info{
display: none;
// your other styling
}
.icon-class:hover ~ .invoice-info{
display: block;
}
~ is general sibling selector in CSS
I need to do tank animation, where according to the liquid level, the height of the tank(image) changes. For this I have written HTML code as below:
<div>
<img id='T1' style="height:0px;position:absolute">
</div>
Now I am obtaining the level information from database using ajax and trying to change the height of the image according to the value of the level parameter using JavaScript.
var level=response;
document.getElementById('T1').height=level."px";
This is changing the height from top to down, but I want down to top.
Inverting the div using transform is not working. Also transition is not working as transition-time cannot be specified in this case.
Please provide me some suggestions.
Position the image absolute to the bottom of the container with bottom: 0 so that it always starts at the bottom and extends from there.
To demonstrate:
var level=14;
document.getElementById('T1').style.height = level+"px";
var changeLevel = function() {
var level = document.getElementById('level').value;
document.getElementById('T1').style.height = level+"px";
}
div {
margin-top: 20px;
position: relative;
height: 50px;
background-color: #eee;
}
#T1 {
height: 0px;
background-color: #909;
width: 100%;
position: absolute;
bottom: 0;
}
<input id="level" type="text" placeholder="Level" />
<input type="button" value="Change Level" onclick="changeLevel()"/>
<div>
<div id='T1'></div>
</div>
You can add following CSS for this
#t1 {
position: absolute;
left: 0px;
bottom: 0px;
}
or
<div>
<img id='T1' style="height:0px;position:absolute; bottom: 0px; left: 0px;">
</div>
Hard to figure out what you are trying to do. Maybe a link would help. Only thing I could see is style.height is written incorrectly.
document.getElementById("T1").style.height = level + "px";
I have a div that after I click an element(button1), expands its height. I then have another button appear which allows you to shrink the div(button2). After I click button1, the div expands and button2 shows at the bottom. I can then click button2 to shrink the div back to normal, but if I expand the div again, button2 is now off the edge of the screen, albeit in the same bottom location, just far left rather than centered.
I had to set the margin on button2 to -25px since the absolute positioning was kicking it off-center. And I need to use absolute positioning since it seemed it was only way to get the button to appear at the bottom of div after it had expanded.
$(".button1").on("click", function(){
$(".button1" ).fadeOut(200);
$("#block3").animate({
height: '800px'
}, 600, function() {
$(".button2").fadeIn(200);
});
});
$(".button2").on("click", function(){
$(".button2").fadeOut(200);
$("#block3").animate({
height: '400px'
}, 600,function(){
$(".button1" ).fadeIn(200);
});
});
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: 25px;
}
.button1{
width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class = "col-md-12" id = "block3">
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" />
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" />
</div>
</div>
Uploaded the code.
https://jsfiddle.net/bs9xhe5e/2/
On the second click it changed the inline styling to display:block instead of display:inline, if you just add the display:inline into your jQuery it works;
https://jsfiddle.net/havL1z3m/
Added
$(".button2").css({display:"inline"});
The reason .button2 is showing up all the way to the left is that the absolute positioning gives it a default left of 0px.
Probably the easiest fix would be to remove absolute position, as well as the margin-left. Instead, to get .button2 to the bottom of the section, just set margin-top: 725px.
.button2{
width: 50px;
height: 50px;
display:none;
margin-top: 725px;
}
And then you will no longer need to use .css() to change bottom of .button2.
Check out this working fiddle: https://jsfiddle.net/gkpx7L15/
Change button2 styles like this:
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: -25px;
left:50%;//added style
}
https://jsfiddle.net/bs9xhe5e/3/
And everything will work fine
NOTE: Element will be positioned to the center of parent like this only when width is fixed like here. Example:
.someItem{
width: someWidth;//here we set some width to element
left: 50%; //Here we set position from the left
margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left
}
I have two img elements and I want the first image.png to go behind the transparent image.png. I have tried a lot of different things (z-index, transparent background color, rgba background color, positioning absolute and relative, nesting one in a div, making them both divs). Right now i've been trying to use a transparent .png image. The image .png is actually behind it, but it still shows through it. Please help.
html:
<body>
<main class="site-wrapper">
<div class="carnival"></div>
<div id="images">
<img id="divbox" src="images/divbox.png">
<img id="clown1" src="images/clown1.png">
</div>
</main>
</body>
js: (i did the styles in js b/c I was interested in learning how to do it that way):
//styles
//divbox:
document.getElementById('divbox').style.display = "inline-block";
document.getElementById('divbox').style.transform = "skew(-2deg)";
document.getElementById('divbox').style.marginTop = "21%";
document.getElementById('divbox').style.marginLeft = "47.6%";
document.getElementById('divbox').style.height = "200px";
document.getElementById('divbox').style.width = "200px";
document.getElementById('divbox').style.border = "1px solid orange";
document.getElementById('divbox').style.position = "absolute";
document.getElementById('divbox').style.zIndex = "2";
//clown1:
document.getElementById('clown1').style.display = "inline-block";
document.getElementById('clown1').style.transform = "rotate(90deg)";
document.getElementById('clown1').style.marginTop = "21%";
document.getElementById('clown1').style.marginLeft = "53%";
document.getElementById('clown1').style.border = "1px solid green";
document.getElementById('clown1').style.position = "relative";
document.getElementById('clown1').style.zIndex = "1";
Thanks for any help, please let me know if I can answer questions.
UPDATE:
Sorry for not being clearer. I have now achieved getting the image behind the other image, but since the image ontop is transparent, the image behind is showing. How do I stop this?
Here is an example of what is happening:
http://oi61.tinypic.com/2mw9egx.jpg
Notice the orange border is ontop so it is definitely ontop.
UPDATE 2:
This should make it really clear what I want. Again sorry for the confusion:
http://oi59.tinypic.com/eamb0n.jpg
I would do something like the following jsFiddle: http://jsfiddle.net/7gdx48fu/. Might need to reload a couple times to see a good example of the overlay working.
Create a wrapper DIV for your two images. Set that wrapper DIV's to position: relative so we can use absolute positioning on one of the images it contains. By doing this we prevent the absolute positioned image from potentially aligning itself elsewhere in the page, like the upper left corner of the browser window.
Then, set the position of our overlay image, the transparent PNG, to position: absolute along with top: 0 and left: 0 to align it with the first images upper left corner.
You can do this without using z-index if you watch the order you include your images. Place the image you want behind the transparent PNG in the markup first followed by the transparent PNG.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<img class="overlay" src="http://lorempixel.com/200/200/city">
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0.25; /* using this to replicate the transparent PNG */
}
EDIT
The OP's requirements have changed to include how to prevent an image behind a transparent image from showing through the transparent image.
Here is an updated jsFiddle: http://jsfiddle.net/7gdx48fu/2/.
This approach I wrapped the transparent PNG in a wrapper DIV and set it's background color. I used white in my example but you may use any color.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="overlay">
<img src="http://lorempixel.com/200/200/city">
</div>
</div>
.img-container {
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
background-color: white;
top: 15px; /* shifting overlay for illustrative purposes - not use case code */
left: 15px; /* shifting overlay for illustrative purposes - not use case code */
}
.overlay img {
opacity: 0.25; /* using this to replicate the transparent PNG */
}
Not perfect but I'm unsure of how else to proceed.
EDIT 2
It seems the OP wants to do a form of masking. You can do this with overflow: hidden.
I have updated the jsFiddle: http://jsfiddle.net/7gdx48fu/4/
In this updated answer I have kept the wrapper DIV and set it with a fixed width and height. Then applied overflow: hidden. What we are doing here is creating an invisible window that will only show content when it is within the dimensions of the window.
To have the image appear as if it is coming out of the base layer image simply adjust the position of the image inside the wrapper DIV. For the jsFiddle simply play with the value of top in .mask img.
This will need a little tweaking for the proper placement and size of the .mask DIV to fit your needs but hopefully points you in the right direction.
<div class="img-container">
<img src="http://lorempixel.com/200/200/city/">
<div class="mask">
<img src="http://lorempixel.com/200/50/city">
</div>
</div>
.img-container {
position: relative;
}
.mask {
position: absolute;
top: 25px;
left: 25px;
height: 100px;
width: 100px;
overflow: hidden;
border: 1px solid red; /* for illustrative purposes */
}
.mask img {
position: relative;
top: 25px;
}
Have you tried the css opacity property ?
#clown1{ opacity:0.3;}
make both images' position absolute instead of relative
for the above to work, some common ancestor (i.e. #images) must have a non-default position too (e.g. relative)
forget zIndex - all else being equal, the latter element will be "topmost"
put all the above in a CSS style sheet instead of in JS code!
Forgetting the other transformations and margins, etc, the core CSS that you need is:
#images {
position: relative;
}
#divbox, #clown1 {
position: absolute;
}
Put them both in a parent container. Make the parent have position: relative and put both images having position:absolute. That way they will stack.(Something like that that I didn't check The order of img's could be wrong - play around a bit.
CSS:
.parent > img.transparent {
position: absolute;
}
.parent > img {
position: absolute; opacity: 0.5
}
HTML:
<div class="parent" style="position:relative">
<img src="other.png" class="transparent"/>
<img src="transparent.gif"/>
</div>
Some more explanation: When you make a parent/ancestor element's position relative it means that its contents that are absolute will be relative to the parent and not to the whole window
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}