Hover Image Grid

Having trouble with creating an image grid that displays text on hover? Check out the issue I encountered with my layout: https://i.sstatic.net/PVDzB.jpg

For some reason, the text is not aligning properly on the image, causing a layout problem. Any assistance in resolving this would be highly appreciated!

.members-grid {
  display: grid;
  grid-gap: 5px;
  justify-items: center;
  padding-bottom: 5em;
}

.members-grid .size {
  width: 100%;
}


/* For tablets: */

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto;
  }
  .size {
    width: 45%;
  }
}


/* For desktop: */

@media (min-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto auto;
  }
  .size {
    width: 30%;
  }
}

.name {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
<div class="members-grid">
  <div class="pic">
    <img src="eunbi.jpg" alt="kwon eunbi" class="size">
    <div class="name">
      <h2>Kwon Eunbi</h2>
    </div>
  </div>

  <div class="pic">
    <img src="sakura.jpg" alt="miywaki sakura" class="size">
    <div class="name">
      <h2>Miyawaki Sakura</h2>
    </div>
  </div>

  <div class="pic">
    <img src="hyewon.jpg" alt="kang hyewon" class="size">
    <div class="name">
      <h2>Kang Hyewon</h2>
    </div>
  </div>
</div>

Answer №1

To ensure that the text aligns perfectly with the grid, it must be a direct child of the parent grid. No changes needed in the CSS

.members-grid {
  display: grid;
  grid-gap: 5px;
  justify-items: center;
  padding-bottom: 5em;
}
img {
  height: 100%;
}

.members-grid .size {
  width: 100%;
}


/* For tablets: */

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto;
  }
  
  .size {
    width: 45%;
  }
}


/* For desktop: */

@media (min-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto auto;
  }
  
  .size {
    width: 30%;
  }
}

.name{
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
<div class = "members-grid">
    <div class = "pic">
        <img src = "//unsplash.it/50" alt = "kwon eunbi" class = "size">
            </div>
            
            <div class = "pic">                     
                <img src = "//unsplash.it/50" alt = "miyawaki sakura" class = "size">
            </div>
            
            <div class = "pic">                         
                <img src = "//unsplash.it/50" alt = "kang hyewon" class = "size">
            </div>
                        <div class = "name">
                                <h2>Kwon Eunbi</h2>
                        </div>
            <div class = "name">
                <h2>Miyawaki Sakura</h2>
                </div>
    <div class = "name">
        <h2>Kang Hyewon</h2>
    </div>
</div>

It is optimized for larger screens, as desired. For smaller screens, adjustments may be needed with the media queries.

Answer №2

If you're looking for a solution, this code snippet might be just what you need. And the best part? It's designed to be responsive!

The grid-wrapper and polaroid classes work together to make sure the grid layout adjusts to different screen sizes. If you want to add more images to the grid, simply adjust the width of the polaroid class and the grid-template-columns of the grid-wrapper class.

Within the container div, you'll find both an image and text. When you hover over the image, the opacity decreases while the text opacity increases. This hover effect is managed through the CSS. The 'middle' class ensures the text stays centered over the image.

.abtimg {
  padding: 5px
}

.width {
  width: 100%
}

.container {
  position: relative;
  width: auto;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.5;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #fff;
  color: #000;
  font-size: 16px;
  padding: 16px 32px;
}

.ptr {
  cursor: pointer;
}

a:hover {
  color: #000;
  text-decoration: none;
}

.font1 {
  font-size: 2em;
  text-align: center;
  text-decoration: underline;
}

@media only screen and (min-width: 610px) {
  .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
    justify-items: center;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 3em;
  }
  .polaroid {
    width: 25vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background-color: #fff;
    height: auto;
  }
}

@media only screen and (max-width: 609px) {
  .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(80vw, 1fr));
    justify-items: center;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 3em;
  }
  .polaroid {
    width: 80vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background-color: #fff;
    height: auto;
  }
}
<div class="grid-wrapper">
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/1.jpg" alt="kwon eunbi">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">kwon eunbi</div>
                    </a></div>
                </div>
            </div>
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/2.jpg" alt="miywaki sakura">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">miywaki sakura</div>
                    </a></div>
                </div>
            </div>
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/3.jpg" alt="kang hyewon">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">kang hyewon</div>
                    </a></div>
                </div>
            </div>
    </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

Populating options in <select> for Internet Explorer version 5

Let me address the first question here. The reason why I am using IE5 is because I am working on a Windows CE device which limits me to this browser. My application involves a webpage with various elements. In my HTML code, I have two text fields and a se ...

Preventing duplicate Google indexing with .htaccess

I have a website that utilizes a RewriteRule in the root directory to direct queries in this format: http://domain.com/foo/parameter to http://domain.com/index.php?args=parameter Visitors only see the clean URL and everything works smoothly. However, ...

jquery slider for inputting phone number on a mobile device

I am currently working on enhancing the user interface by implementing a feature where users can select a mobile number using a slider. The idea is that the user will choose a digit between 0 and 9 using the slider, then confirm their selection by pressing ...

running a WordPress website on a local server

I'm currently facing an issue with exporting my WordPress website locally. When I try to export it, I get an XML file, but with the All in One WP Migration plugin, it gives me a "WPRESS" file instead. I don't have the budget to pay for a business ...

Issue with Jquery function not triggering due to HTML being injected after the initial load

Apologies for the unclear title. I am currently using a Twitter Bootstrap Modal to edit a record. <a class="contact" href="#" data-form="/edit/models/sms/{{ @value['fields']['id'] }}" title="Edit"> <span class="fa-stac ...

Discovering specific values for an ID using API calls in Angular (Implementing CRUD Operations in Angular with API Integration)

My current project involves CRUD operations in Angular utilizing the API created in Laravel. I have successfully added and fetched values, but encountered an issue when attempting to update values using their respective IDs. This snippet is from my app.co ...

Is there a way to launch Visual Studio Code using a web browser?

Is there a way to launch "Visual Studio Code" automatically upon clicking a button on my website? ...

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

What is the best way to trigger a tooltip when an input field is clicked?

I want to implement a form that displays tooltips whenever a user clicks or focuses on an input field, and the tooltip should disappear when the user clicks elsewhere. While I understand the basics of using JavaScript's getElementById and click event ...

Customizing jQuery dialog: What is the best way to change the appearance of the close button?

I am struggling to style the close tag in my jQuery dialog box. I have looked through the documentation and tried various CSS alterations, but nothing seems to be working. Any suggestions or insights would be greatly appreciated. My code is provided below ...

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

Aligning HTML form elements side by side

I am having trouble displaying multiple Bootstrap elements and buttons in a single line. Here is an example of what I have: <span><input class="form-control" id="filename" value="Select a ZIP file to upload..." disabled style="display: inline"> ...

Container will keep items from spreading out

Experiencing an issue with the card layout in my weather dashboard app. The cards within a container are not spreading out evenly to match the 100% width of the header. I want the container with the 5 cards to be the same width as the header and wrap prope ...

Ways to incorporate margins into text on PDF pages produced by Puppeteer without altering the background color

I am currently using puppeteer to generate PDFs that contain dynamic content. My goal is to include margins/padding above and below the text on consecutive pages. Unfortunately, when I try to add margins with the property margin: { top: "1cm", bottom: "1 ...

Dynamic search form technology

My HTML view includes a search form and AJAX code to handle the form request $(document).ready(function() { console.log('Ready'); $('.search-wrapper').on('click', '#find-dates', function(a) { a. ...

Extracting HTML elements between tags in Node.js is a common task faced

Imagine a scenario where I have a website with the following structured HTML source code: <html> <head> .... <table id="xxx"> <tr> .. </table> I have managed to remove all the HTML tags using a library. Can you suggest w ...

Styling the elements that are next to each other using CSS

Hey there, what if I have HTML elements structured like this: <div> <div>Name</div> <div><input type="text" class="check"> <div>Age</div> <div><input type="number" class="check"></div> ...

What is the best way to retrieve a specific value from a multi-dimensional JSON object array?

I'm struggling to retrieve a value from the JSON object below array(3) { [0]=> object(stdClass)#1 (11) { ["Group"]=> string(2) "18" ["GroupName"]=> string(8) "Wireline" ["Region"]=> string(2) "15" ["RegionName"]=> string(8) "Atlantic" ...

Switch videos within the video tag as you scroll

I am trying to implement a video tag within a div element on my website. Here is the current code: <div class="phone" align="center"> <div class="phone-inner"> <video width="100%" height="100%" autoplay="" loop="" muted id="phonevideo ...

Bootstrap 3's Clear:Left Media Query Feature

Bootstrap is being used, and there is a div with col-xs-12, col-sm-6, col-md-4 classes. Task : To add a clear on every 1 item for col-xs-12, add a clear on every 2 items for col-sm-6, and clear on every 3rd item for col-md-4. The current code only s ...