I want to make an overlay for the picture. Came up with this layout:
<div id="parent"> <img/> <div id="children"></div> </div> css:
img {width: 100%;} Tell me how to set the height of div # children, so that it would be equal to the height?
1 answer
img { width: 100%; max-width: 100%; height: auto; } .parent { max-width: 400px; margin: 15px auto; position: relative; line-height: 0; } .children { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); line-height: 1; opacity: 0; transition: 0.3s; } .parent:hover .children{ opacity: 1; } <div class="parent"> <img src="http://placehold.it/250x150" alt=""> <div class="children"></div> </div> 
soledar10 soledar10
22.4k 5 gold signs 21 silver marks 51 bronze marks
- what role does line-height play here? - Denni Adam
- onein order to remove indent img. when you hover it will be seen jsfiddle.net/soledar10/rwgu3x44 - soledar10
- one
|