CODEWITHSUNDEEP
javascripthtmlcssreactjs
gamer
gamer

Reputation: 5873

css show button over image

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 ?

Upvotes: 2

Views: 4446

Answers (3)

Greg
Greg

Reputation: 343

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;
}

Upvotes: 1

Jeremy Rajan
Jeremy Rajan

Reputation: 662

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!

Upvotes: 1

Muhammad Hamza Nisar
Muhammad Hamza Nisar

Reputation: 601

make button position relative and use z-index: maybe it will be helpful for you.

Upvotes: 2

Related Questions