In the image below, there are 4 divisions and I need to add a view-more floating button to image-4 at the center of the div. Can anyone help me achieve this using HTML & CSS?
Please provide a solution similar to the one shown here:
https://i.sstatic.net/DYei1.png
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>.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>/* Styling 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 Structure-->
<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>* {
box-sizing: border-box;
}
/* Styling the buttons */
button {
background-color: lightblue;
color: black;
font-size: 25px;
}
/* Creating two equal columns that float next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clearing floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Styling for button class */
.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>.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>I created a modal specifically for mobile users that displays when they access the site. It features various categories and nested menus for easy navigation. <!-- Modal --> <div class="modal fade" id="exampleModalCenter" t ...
Here's my issue. I'm working with a Javascript object, initialized as var stack = {}. This object is used in my project to store arrays. When the user clicks the add button, an array is added to the object with a specific key that is inputted in ...
Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...
My goal is to have two different site templates, one for desktop (which is already good) and one for mobile. For the mobile template, I want it to display only an image that fills the entire screen. The image should take up all the available space in term ...
When data is copied from the clipboard and pasted into an html textarea, there is some interesting parsing that occurs to maintain the formatting, especially with newlines. For instance, suppose I have the following code on a page that I copy (highlightin ...
I have a piece of third-party HTML that I need to work with: <tr> <td> <asp:Label ID="lblURL" AssociatedControlID="txtURL" runat="server" EnableViewState="false" CssClass="FieldLabel" /> ...
As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image siz ...
I'm in the process of integrating the menu from the sb admin 2 template into my Ruby on Rails application: As I gradually added components to test functionality, I successfully implemented the top and side nav bars. However, I encountered an issue wi ...
Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...
I'm struggling with mouse coordinates while working on canvas in HTML5. My approach involves using JavaScript for drawing on the canvas. Below is my current code to track the mouse pointer within the canvas: $('#canvasID').mousedown(functi ...
In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...
Below is a code I've written for a multi-step form, everything is functioning properly here. However, currently when we are at the first step and click on the next button, the next step form will display. I want to modify this so that when the next bu ...
In my React application, I integrated an NVD3 scatter chart. However, I have encountered an issue with the tooltip not disappearing when hovering over the chart: https://i.stack.imgur.com/6lLok.png After moving the cursor away from the chart, the tooltip ...
Check out this link to view the table and code: http://jsfiddle.net/KPEGU/485/ I am experiencing an issue with exporting the table to Excel CSV. When I click the export button, a blank CSV file is generated without any data. // The following JavaScript ...
{ [ "quicktype_id": 1, "quicktype": "Laptops", "qucik_details": [ { "type_name": "car", "type_img": "car_img" }, { "type_name": "van", "type_img": ...
In my quest to parse a list of locally saved webpages, I encountered an issue with Internet Explorer. The pages would not open and displayed an error message stating "page not responding". However, FireFox was able to open them without any problems. To wor ...
Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...
I've been struggling with a reloading issue that keeps going back and forth when all I need is for it to go back. I've tried everything I know, but nothing seems to work. Any help would be greatly appreciated. Thank you in advance :) var reloa ...
I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...
Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...