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 have a background image size (without affecting the div)?

    How to keep divs position fixed even after deleting its neighbors?

    how do I align my error message with Simple_form for Ruby on Rails?

    How to move up an inner box and keep outer box in place with CSS?

    How to change content of a div after link click using CSS :target?

    How do I split a WordPress theme into 2 columns?

    How to change text color of a link inside jQuery accordion

    How to find out DOM and CSS address to an element for Selenium?

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How do I achieve this animation using javascript/jquery? [closed]

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How do I get a CSS Selector to Skip Over?

    How to Tie Events to CSS

    How to align navigation links after navigation menu is collapsed using bootstrap

    How can a transformed Image transition back to it's original shape when hovered?

    How can I set a floats width to the left over space?

    How to make a HTML spinner with CSS

    How to slow down the last few frames in a CSS sprite animation?

    How do I align my radio button with associated text?

    how to have a div with two images in any of 9 possible positions

    How to dynamically apply nested base languages in textarea?

    How to create a border with spaces in it [duplicate]

    How can I achieve this layout using CSS only?

    How do I stop animation in HTML and CSS

    How to style an image created using javaScript

    How to smoothly animate height in CSS or Javascript on mobile devices

    How do I make an entire
  • element a link?
  • How to override a templates default option with javascript and css

    How can I use an inline style to add a shadow around the used portion of my page?

    How do I customize the rdoc Darkfish stylesheet?