i'm trying overlay outline on image using css outline isn't showing up. if replace outline background-color works fine, doesn't achieve framing affect i'm going for. tried using borders increased size of div doesn't work either. need overlay div 100% height , width because image size dynamic.
<figure class="visual-thumbnail" style="overflow:hidden;position:relative;"> <div class="img-info"></div> <a href="http://innovationinhr.com/apploi/?p=351" class="thumbnail"> <img width="326" height="434" src="http://innovationinhr.com/apploi/wp-content/uploads/2013/07/unknown-326x434.jpeg" class="attachment-visual-thumbnail wp-post-image" alt="sharif"> </a> </figure> figure{ display:block;overflow: hidden; position: relative;width:326px;height:435px;} .img-info { outline: solid black 25px; background-color: black; left: 0; top: 0; opacity: 0; position: absolute; filter: alpha(opacity = 0); width: 100%; z-index: 1000; height: 100%; } .visual-thumbnail:hover .img-info{ opacity:.5; } any reason outline wouldn't showing up?
the outline invisible, because outlines appear outside of element. in case, since element (div) large parent (figure), have appeared outside figure. figure has overflow:hidden.
solution: remove both overflow:hiddens figure. or place div in such position outline falls inside figure.
Comments
Post a Comment