CODEWITHSUNDEEP
htmlcss
Fai
Fai

Reputation: 1

How to Turn a Button to an Image in Jquery?

I'm trying to turn an image with text over it into a button. If I use data-role="button", the whole arrangement of the image and the text over it gets all messed up. Any ideas on how to do that and maintain the arrangement as it is? Also, how can I make the text background fit the image perfectly?

img {
    width: 50 px;
    height: 50 px;
}
.container {
    position: relative;
    text - align: center;
    color: white;
}
.centered {
    font - size: 30 px;
    position: absolute;
    top: 50 % ;
    left: 50 % ;
    transform: translate(-50 % , -50 % );
    background: rgba(0, 0, 0, 0.5);
    line - height: 200 px;
    width: 50 px;
    height: 50 px;
}
<div id="feature-wrapper" class="ui-block-d" data-role="button">
    <div class="container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg" />
        <div class="centered">Tree</div>
    </div>
</div>
<!--/tree------------------->

Upvotes: 0

Views: 99

Answers (1)

DEV
DEV

Reputation: 2176

You can use your image as button like this -

img {
  max-width: 100%;
  cursor: pointer;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  line-height: 200px;
  width: 50px;
  height: 50px;
}
<div id="feature-wrapper" class=ui-block-d>
  <div class="container">
    <img onclick="alert('Your function');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Birnbaum_am_Lerchenberg_retouched.jpg/310px-Birnbaum_am_Lerchenberg_retouched.jpg" alt="Tree"/>
    <div class="centered">Tree</div>
  </div>
</div>

Upvotes: 1

Related Questions