How to add floating button on grid image in html & css

Question

As shown in the image I have 4 divisions and need to add view-more floating button on image-4 (center of div). how can I do it using HTML & CSS

Note: I need a solution like this:

Code:

<div class="container">
  <div>
   <img> 1 </img>
 </div>

 <div>
   <img> 2 </img>
 </div>

 <div>
   <img> 3 </img>
 </div>

 <div>
   <img> 4 </img>
 </div>

</div>

Answer 1

 .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }.grid-item { overflow: hidden; }.grid-item img { height: 100%; width: 100%; object-fit: cover; object-position: center center; }.grid-item:first-child { grid-column: span 2; grid-row: span 2; }.grid-butto { position: absolute; bottom: 10%; right: 10%; }

 <div class="grid-container"> <div class="grid-item"> <img src="https://loremflickr.com/640/360" alt=""> </div> <div class="grid-item"> <img src="https://loremflickr.com/640/360" alt=""> </div> <div class="grid-item"> <img src="https://loremflickr.com/640/360" alt=""> </div> <div class="grid-item"> <img src="https://loremflickr.com/640/360" alt=""> </div> <div class="grid-item"> <img src="https://loremflickr.com/640/360" alt=""> </div> <button class="grid-butto">buttons</button> </div>

Answer 2

 * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */.column { float: left; width: 50%; padding: 10px; } button { background-color: lightblue; color: black; font-size: 25px; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } /* Style the buttons */.btn { border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer; }.btn:hover { background-color: #ddd; }.btn.active { background-color: #666; color: white; }

 <div class="row"> <div class="column" style="background-color:#ccc;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 2</h2> <p>Some text..</p> </div> </div> <div class="row"> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ddd;"> <h2>Column 4</h2> <button>Button</button> </div> </div>

Answer 3

 /* CSS */.container { width: 500px; display: grid; grid-template-columns: auto auto; grid-gap: 20px; } img { width: 100%; }.demo { position: relative; }.demo button { cursor: pointer; background-color: rgb(0, 0, 0, 0.5); color: white; font-weight: bold; padding: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <:--HTML--> <div class="container"> <div> <img src="https.//s4.uupload.ir/files/1-6-5_ssnb:jpg" /> </div> <div> <img src="https.//s4.uupload.ir/files/1-6-5_ssnb:jpg" /> </div> <div> <img src="https.//s4.uupload.ir/files/1-6-5_ssnb:jpg" /> </div> <div class="demo"> <img src="https.//s4.uupload.ir/files/1-6-5_ssnb.jpg" /> <button>View-more</button> </div> </div>

Answer 4

 .image { float: left; width: 33.33%; padding: 5px; }.container::after{ content: ""; clear: both; display: table; }

 <div class="container"> <div class="image"> <img> 1 </img> </div> <div class="image"> <img> 2 </img> </div> <div class="image"> <img> 3 </img> </div> <div class="image"> <img> 4 </img> </div> </div>