I created a small box div containing an image and a text beside each other. But I don't know how i can add a form around it that when I hover on any part of the box it would click on submit.

<div >
            <img src="images/Portis.png" alt="trust" width="50" height="50">      
            <span>Portis Wallet</span>
        </div>

.trust-box{
width: 200px;
height: 80px;
margin: 20px;
background: #fff;
color: #000;
border-radius: 5px;
text-align: center;

}

And again how do I make the image and the text align horizontally inside the box?The div box image

CodePudding user response：

Research mouseenter for adding an event listener for hovering. For aligning your elements you can make use of flexbox. See the snippet below:

.trust-box {
  width: 200px;
  height: 80px;
  margin: 20px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  border: 1px solid black;
  text-align: center;
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 1rem;
}

<div >
  <img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="trust" width="50" height="50">
  <span>Portis Wallet</span>
</div>

More on flexbox here.

CodePudding user response：

You should try making it a button

<button type="button" >
  Portis Wallet
  <img src="images/Portis.png" alt="trust" width="50" height="50">
</button>

Aligning the image you can try either margin-top or top