Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should be positioned on the left side while the main image remains fixed on the right.

Please refer to the attached image for reference.

enter image description here

.gallery {
  display: grid;

  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-end: 8;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* On mouseover, fade in overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}
<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1">
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>

  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0">

   // Additional images and labels follow...

</div>

htmlcsscss-position

Answer №1

After experimenting with the table grid options for some time, I finally discovered a solution that seems to work well. I had to do some research on how to use display:grid and found some helpful information and examples at this link: https://css-tricks.com/snippets/css/complete-guide-grid/

I utilized the grid-template-columns property to define 6 columns of equal size that fill the full width. Then, I played around with different numbers and spans for the grid-column-start and grid-column-end properties of the .gallery img's to specify that the image should span 3 columns to the right and 3 rows down. This arrangement ensures that the labels occupy the cells in the leftmost columns and rows, resulting in the layout below.

Although I am aware that similar functionality can be achieved using JavaScript, I enjoyed the challenge of solving it without resorting to scripting, which resulted in cleaner and more readable code.

.gallery {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14%;
  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 4;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  width: 100%;
  height: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}
<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1" />
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-2" />
  <label for="img-tab-2" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg);"><div class="overlay">Honey</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg" border="0" />

Answer №2

You're incredible, just what I needed :) thanks a lot, I'm absolutely loving this platform!

.gallery {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14%;
  grid-gap: 20px;

  max-width: 100%;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 4;
  grid-column-end: span 3;
  grid-row-start: 1;
  grid-row-end: span 3;
  width: 100%;
  height: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
.overlay {
    position: absolute;
    top: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    color: white;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.overlay:hover {
  opacity: 1;
    background: rgb(255 255 255 / 91%);
    color: black;
}
<div class="gallery">
  <input type="radio" checked="checked" name="select" id="img-tab-1" />
  <label data-title="Sample Infotext" for="img-tab-1" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg);"><div class="overlay">Orange</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Orange-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-2" />
  <label for="img-tab-2" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg);"><div class="overlay">Honey</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Honey-1.jpg" border="0" />

  <input type="radio" name="select" id="img-tab-3" />
  <label for="img-tab-3" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg);"><div class="overlay">Green</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Green-1.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-4" />
  <label for="img-tab-4" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg);"><div class="overlay">Grape</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Grape-1.jpg"border="0" />
  
    <input type="radio" name="select" id="img-tab-13" />
  <label for="img-tab-13" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg);"><div class="overlay">Camel</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Camel-1.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  
  <input type="radio" name="select" id="img-tab-19" />
  <label for="img-tab-19" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg);"><div class="overlay">Wine</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Wine-3.jpg"border="0" />
  
  <input type="radio" name="select" id="img-tab-28" />
  <label for="img-tab-28" style="background-image: url(http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg);"><div class="overlay">Sky</div></label>
  <img src="http://www.wphizmetleri.com/felt/wp-content/uploads/2021/10/Pet-Felt-Panel-Acoustic-Sky-1.jpg"border="0" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Effectively replicating an HTML action in MVC ASP.NET

I am looking to replicate a basic function in HTML that is currently working for my needs, but now I need to implement the same functionality in MVC ASP.NET. Here is the original HTML code: <HTML> <HEAD> </HEAD> <BODY> ...

c#htmlasp.net-mvchttp-post

Is there a way to restrict the number of checkboxes selected based on the values of radio buttons?

I am currently working with a group of radio buttons: <input type="radio" name="attending_days" value="06-18-13"/>Tuesday June 18, 2013 <input type="radio" name="attending_days" value="06-18-13"/>Wednesday June 19, 2013 <input type="radio" ...

javascriptjqueryhtml

Dragging additional events into FullCalendar is disabled after applying a filter to external events

I am encountering an issue while attempting to drag events from the external events box to the fullcalendar. To replicate the problem, you can visit this CodePen: Initially, dragging an external event into the calendar works smoothly. However, after appl ...

jqueryangularjshtmlfullcalendar

Update the content of the h5 tag dynamically as the new div's data attribute is revealed by scrolling into view

I would like to dynamically update the h5 tag text based on the data attribute of the current div when it comes into view. The CSS is configured so that each .bar class div occupies 100% height, with only one visible at a time. I have successfully implemen ...

jqueryhtmlfunctiontextattributes

How can I extract the "href" attribute from an anchor tag using XPath?

I am working with HTML code that looks like this: <a href="/images/big_1.jpg" class="class-a"> <img class="class-img" src="/images/small_1.jpg"/> <span class="class-span"> <img src="/images/img_1.png"> </ ...

htmlparsingxpath

Create numerous collapsible elements using the ui.bootstrap and AngularJS frameworks

Currently, I am working on implementing the ui bootstrap collapse feature. The static single or double collapse system works perfectly fine, but for my specific design requirements, I need to create collapses using ng-repeat. Unfortunately, I am unsure how ...

javascriptjqueryhtmlangularjsangular-ui-bootstrap

Guide to positioning a button on top of another button using Vuetify

I'm facing an issue where I want to add a button on a clickable card, but clicking the button also triggers the card click event. Here's my current code snippet: <v-card @click="show = !show"> <v-img src="https://cdn.vuetifyjs.com/im ...

cssvue.jsvuetify.js

Picture is not displaying properly post-rotation

Is there a way to rotate an image by 90 degrees and display it in a Card Component without it covering the text? Currently, I am utilizing Element.io, but encountering issues with the rotated image overlapping the text. The image currently has the followi ...

cssvue.js

Utilizing CSS to Implement a Background Image

Here is where I am looking to upload the image. Ideally, I would like to position my image to the left side of the text related to Food and Travel. You can view the image here. .block-title h3 { color: #151515; font-family: 'Montserrat', s ...

htmlcss

Utilize viewport activation to determine browser width

Is there a way to dynamically add the viewport-meta tag only for devices with screen widths larger than 680px? If the screen is smaller than 680px, then the responsive style file should be enabled instead. I attempted to achieve this by placing the follow ...

javascriptcssviewportresponsive

Tips for transferring data to index.html from Fetch API

Trying to transfer data from an API to my website has been a challenging task. The structure of my directories is as follows: project > server.js | public public > index.html | styles.css A snippet of my code in server.js shows the process: ...

htmlnode.jsreactjsexpress

A helpful tip for those working with jQuery or WordPress PHP: Use a script that calculates the number of characters in a text, identifies the last space, and replaces everything after

Is there a way to restrict the amount of text shown within a div sourced from a WordPress Custom Field? <?php $textcount = strlen(get_field('custom_quote')); ?> <?php if ( $textcount > 250 ) : ?> <?php the_field('custom ...

phpjquerycsswordpresscharactercount

Refreshing pane content within Kendo UI Splitview

I am utilizing the Kendo UI splitview. In my setup, I have configured one pane on the left for navigation and another pane on the right for content display. The left pane contains 4 navigation links structured as follows: <div data-role="pane" id="si ...

javascriptjqueryhtmlkendo-ui

Adjust the GTK3 tooltip color exclusively for Eclipse when it is operating on Ubuntu

I am using Eclipse Mars on Ubuntu 15.04 and looking to customize the GTK3 tooltip fg/bg color specifically for Eclipse without impacting other applications. I have come across instructions for changing this color system-wide, but I need guidance on how t ...

javacsseclipseubuntugtk3

Unable to toggle class feature

I have a trio of play buttons for a custom player setup, displayed like so: <div> <div class="gs-player"> <div id="gs1" onclick="play(309689093)" class="fa fa-3x fa-play"></div> </div> <div class="gs-player"> ...

jquerycss

Issue with Google Maps functionality within the jQuery easytabs platform

Upon clicking the contact tab, the gmaps loads but unfortunately only shows the left corner of the map. Quite intriguing... Any thoughts on how to fix this? Here is the corresponding jsfiddle This is the structure of my HTML code: <div id="menu-contai ...

jqueryhtmlcssgoogle-maps

Material UI Grid Items not stretching to fill the entire available width

I'm currently working with a nested Grid system in Material UI, but the Grid items are only occupying a fixed width and leaving some empty space. The issue arises when this fixed space is used up and instead of adjusting their internal free space, the ...

cssreactjsmaterial-uimaterial-designstyling

Accessing getUserMedia within Internet Explorer 11 or utilizing MediaStream on IE 11

I am attempting to utilize the getUserMedia function in IE 11 with the help of the temasys plugin. However, IE does not support the MediaStream instance returned by getUserMedia. Below is a snippet of my code: import React from 'react' import { ...

javascripthtmlreactjsinternet-explorer-11temasys

Modify the dropdown menu title dynamically based on the selection made in Angular

My Angular web-application has a dropdown menu that looks like this: <div class="btn-group" dropdown> <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">NAMEOFDROPDOWN <span class="caret"></span>&l ...

htmlangulartypescriptdropdown