CODEWITHSUNDEEP
htmlcss
Wanting to learn
Wanting to learn

Reputation: 468

Keep close button on upper right corner even when image scales

How the heck can I keep a close button on the right top corner of an image even when I scale the image using css? the scale is in terms of when the user make the browser a different size the image is scaled. p.s. how come when I use full_close {left:0px;} I lose the image completely JSFIDDLE

.fit {
 max-width: 100%;
 }

.center {
 display: block;
 top: 0px;
 right: 0;
}

.right {
 position: relative;
 right: 0;
}

#full_image {    
  width: 0px;
  height: 0px;
  left: 0px;
  position: absolute;
  opacity: 1;
  z-index: 9;
}

#full_image img {     
    left: 0px;       
    position: fixed;
    overflow: hidden;
}

#full_image ul {
    width: 0px;
    height: 0px;
    list-style: none outside none;
    position: relative;
    overflow: hidden;

}

#full_image  li:first-child {
    display: list-item;
    position: absolute;
}

#full_image  li {
  position: absolute;
  display: none;

}


#full_image .full_close{
    background-color:yellow;
    top: 10px;     
    cursor: pointer;
     height: 29px;
    opacity: 1;
    position: absolute;    
    width: 29px;
    z-index: 999;
    left: 0px;
}

 <div id="full_image">
 <ul><li><img class="center fit right" src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/></li></ul>
  <span> <a href="#" class="full_close "></a></span>

   </div>

Upvotes: 1

Views: 1749

Answers (1)

Kevin Jantzer
Kevin Jantzer

Reputation: 9461

Well you've got a lot of unnecessary styles and elements. Check out the updated example, this should be all that you need: http://jsfiddle.net/dmEpF/34/

<div id="full_image">

    <img src="http://cdn.funkyspacemonkey.com/wp-content/uploads/2013/06/steve-wozniak-white-iphone-4.jpg"/>

    <a href="#" class="full_close">X</a>

</div>

And the CSS:

#full_image {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

#full_image img {     
    max-width: 100%;
}

#full_image .full_close{
    background-color:yellow;
    top: 10px;     
    cursor: pointer;
    height: 29px;
    opacity: 1;
    position: absolute;    
    width: 29px;
    z-index: 999;
    right: 10px;
    color: #222;
    text-decoration: none;
    text-align: center;
    line-height: 28px;
}

Upvotes: 3

Related Questions