html - How to create a div with black background to fit right behind a div? -

html - How to create a div with black background to fit right behind a div? -

i have image, on hover animate fade out opacity: 0.4;, fading out fading white, liked fade black, found solution alter background color of body black. fadeout towards black. plan i'm trying create div black background have same width , height img don't know how it.

html

<div class="container"> <div class="img_section "> <img class="eight columns test_img" src="images/wpdevshed-portfolio.jpg" alt="logo"> <h2 class="caption">jack<br />portfolio1</h2> </div> </div>

the width , height of image 500 500. want black bg behind image, when fadeout towards black.. know of simple ways can accomplish instead of using body{background-color:black};?

you can acheive giving background parent div. below simple code helps you.

fiddle: http://jsfiddle.net/kiranvarthi/ar387hav/

css:

.container { background: #000; position:relative; height:500px; width:500px; margin:0 auto; } .container img { position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } .container img:hover { opacity:0; }

html css