How to add Button over image using CSS

Question

i am new in CSS so sorry if this question is just stupid or too simple but i just dont know how to do it   I need to place a button over the image  how it should looks    You see there a blue button   Kopit  Thats IT  i style this thing already to my website but as one single image so my code looks like   CSS    shop      background-image  url  images shop bg png        background-repeat  repeat-x          height 121px      width  984px      margin-left  20px      margin-top  13px      shop  content          width  182px    328 co je 1 3 - 20margin left       height  121px      line-height  20px      margin-top  0px      margin-left  9px      margin-right 0px      display inline-block       My HTML     lt div id  shop  gt         lt div class  content  gt  Counter-Strike 1 6 Steam  lt a href     gt  lt img src  images CSsteam png  gt  lt  a gt  lt  div gt         lt div class  content  gt  Counter-Strike 1 6 Steam  lt a href     gt  lt img src  images CSsteam png  gt  lt  a gt  lt  div gt         lt div class  content  gt  Counter-Strike 1 6 Steam  lt a href     gt  lt img src  images CSsteam png  gt  lt  a gt  lt  div gt         lt div class  content  gt  Counter-Strike 1 6 Steam  lt a href     gt  lt img src  images CSsteam png  gt  lt  a gt  lt  div gt         lt div class  content  gt  Counter-Strike 1 6 Steam  lt a href     gt  lt img src  images CSsteam png  gt  lt  a gt  lt  div gt              lt  div gt    Is here anybody who can help me to style that button as a different element   Thanks a lot for reading this post

User · Answer

Adapt this example to your code  HTML   lt div class  img-holder  gt       lt img src  images img-1 png  alt  image description   gt       lt a class  link  href    gt  lt  a gt   lt  div gt    CSS   img-holder  position  relative    img-holder  link       position  absolute      bottom  10px    your button position       right  10px    your button position

User · Answer

I like TryingToImprove s answer  I ve essentially taken his answer and simplified it down to the barebones css to accomplish the same thing  I think it s a lot easier to chew on   HTML    lt div class  content  gt       lt img src  http   placehold it 182x121   gt        lt a href     gt Counter-Strike 1 6 Steam lt  a gt   lt  div gt            CSS    content          display inline-block      position relative      content a       position absolute      bottom 5px      right 5px      Working fiddle here

User · Answer

lt div class  content  gt     Counter-Strike 1 6 Steam        lt img src  images CSsteam png  gt        lt a href     gt Koupit lt  a gt   lt  div gt     Use this css   content   width  182px    328 co je 1 3 - 20margin left   height  121px  line-height  20px  margin-top  0px  margin-left  9px  margin-right 0px  display inline-block  position relative    content a  display inline-block  padding 10px  position absolute  bottom 10px  right 10px

User · Answer

If I understood correctly  I would change the HTML to something like this    lt div id  shop  gt       lt div class  content  gt           lt img src  http   placehold it 182x121   gt            lt a href     gt Counter-Strike 1 6 Steam lt  a gt       lt  div gt   lt  div gt    Then I would be able to use position absolute and position relative to force the blue button down   I have created a jsfiddle  http   jsfiddle net y9w99

User · Answer

You need to give relative or absolute or fixed positioning to your container   shop  and set its zIndex to say 100   You also need to give say relative positioning to your elements with the class content and  lower zIndex say 97   Do the above-mentioned with your images too and set their zIndex to 91   And then position your button higher by setting its position to absolute and zIndex to 95  See the DEMO  HTML   lt div id  shop  gt     lt div class  content  gt  Counter-Strike 1 6 Steam         lt img src  http   www openvms org images samples 130x130 gif  gt             lt a href     gt  lt span class  span  gt  lt span gt  lt  a gt         lt  div gt     lt div class  content  gt  Counter-Strike 1 6 Steam         lt img src  http   www openvms org images samples 130x130 gif  gt             lt a href     gt  lt span class  span  gt  lt span gt  lt  a gt         lt  div gt      lt  div gt    CSS   shop      background-image  url  images shop bg png        background-repeat  repeat-x          height 121px      width  984px      margin-left  20px      margin-top  13px      position relative      z-index 100     shop  content          width  182px    328 co je 1 3 - 20margin left       height  121px      line-height  20px      margin-top  0px      margin-left  9px      margin-right 0px      display inline-block      position relative      z-index 97     img       position relative      z-index 91      span       width 70px      height 40px      border 1px solid red      position absolute      z-index 95      right 60px      bottom -20px

[html] How to add Button over image using CSS?

Examples related to html

Examples related to css