how to see background color of div when if move on image


Tags: html,css,background-color

Problem :

My Code: FIDDLE

HTML:

<div class="d1">
    <img src="http://i57.tinypic.com/30cw0ut_th.png">
    <div class="d2">
        Pic 1
    </div>
</div>

CSS:

.d1{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: 50% center;
    background-size: 100% auto;
    visibility: visible;
}
img{
    width: 100%;
    height: 100%;   
}
.d2{
    margin-top: -50px;
    margin left: 20px;
    background-color: green;
    color: blue;
}

I have an image and I want to try Move a div on Image. My Div [with class d2] has moved on image, but I can't see background color of it. how can I fix it?



Solution :

You need to give the second div position:relative to ensure the correct stacking order.

.d1{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    overflow: hidden;
    /*background-repeat: no-repeat;
    background-position: 50% center;
    background-size: 100% auto;
    visibility: visible;
    */
}
img{
    width: 100%;
    height: 100%;   
}
.d2{
    margin-top: -50px;
    margin left: 20px;
    background-color: green;
    color: blue;
    position: relative;
}
<div class="d1">
    <img src="http://i57.tinypic.com/30cw0ut_th.png"/>
    <div class="d2">
        Pic 1
    </div>
</div>


    CSS Howto..

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    Hide/Show Content at Specific Scroll Positions

    How to join multiple rounded images one by one using line in css or css3

    How to spread a div to cover available space in a parent container?

    how to add css background color for div tag

    how to set css property of one class from another class

    How to modify one element of a class without bothering the rest with the same CSS class?

    Show icon on containing div hover

    How to write variable with multiple css properties in Sass

    How do I get this text using Jsoup?

    CSS Bootstrap AngularJS - How to reduce table row height?

    How to make Gravity Forms Responsive (left/right )?

    css - why my text box is not showing up?

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to add pictures around a background through CSS?

    How to solve this weird issue in html table and css.

    How to fully stretch 2 embeded divs?

    How to make 4 divs float left and one float right with this order?

    How is “:after” element's height and width determined? [closed]

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to apply CSS3 rendering for optimal performance

    How to change CSS of website if accessed through a mobile browser [closed]

    How to draw heart using HTML/CSS table?

    How to apply a CSS gradient over a text, from a transparent to an opaque colour

    Capybara/CSS: How to find an input field by label AND value?

    How can I make this jQuery effect responsive?

    How to change the css style for phone and desktop?

    How to flip which side a progress bar begins at with CSS

    How do I do rounded corners in CSS in Google Chrome

    How to make android app for existing dynamic website