how to make button visible on hover of image

user_15543882 0
Viewed 601

i have a image and button, i need button to be visible only when i hover img or that button itself..note:the button is places at bottom of image

<div class="sixcont">      
              <img  src="{{ slide.image }}" alt="" width="95%">
              <button type="button" class="btn btn-info btn-sm" id="quickview" data-toggle="modal" attr.data-target="{{'#'+slide.slug}}">quick preview</button>
                </div>
angular css html javascript
3 Answers

You can use css to resolve your issue:

.sixcont > button {
display: none;
}

.sixcont:hover > button {
display: block;
}

Also, in libraries like tailwind you can find visibility and hover utils, but I don't know about those utils in bootstrap.

.sixcont > button {
display: none;
}

.sixcont:hover > button {
display: block;
}
<div class="sixcont">      
    <img  src="https://picsum.photos/23"/" alt="" width="200px">
    <button type="button" class="btn btn-info btn-sm" id="quickview" data-toggle="modal" attr.data-target="{{'#'+slide.slug}}">quick preview</button>
</div>

user_66026960

Good news! you don't need Js for that. You can use the css sibling selector + to achieve what you want.

button{
  display:none;
}

img:hover + button{
  display:block
}
<img src="https://picsum.photos/100"/>
<button>Button</button>

user_84242690

An "Angular way" is always use a variable and use the event (mouseover) (mouseout). NOTE: Is necesary that the button is "inside" the img

isVisible:boolean=false;

<div class="wrapper">
  <img src="..." (mouseover)="isVisible=true" (mouseout)="isVisible=false">
  <button (click)="doSomeThing()" *ngIf="isVisible">click</button>
</div>

.wrapper{
  position:relative;
}
.wrapper button{
  position:absolute;
  top:1rem;
  left:1rem;
}
user_85581860
Related