Design a grid that reveals expanded text when hovered over

I'm working on creating an interesting grid effect:

https://i.sstatic.net/HO4H3.jpg

Here's the code I have so far:

HTML:

<div className='container'>
    <div className='options-containers'>
        <div className='landingcard'>
            <div className='buttons-container color-venue'> </div>
            <img className='background-image' src={VenueBackground} alt="" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-artists'></div>
            <img src={BackgroundImage1} alt="Artists Picture" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-fans'></div>
            <img src={FansBackground} alt="" />
        </div>
    </div>
</div>

CSS:

.landingcard{
    position: relative;
}

.landingcard img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 25px;
}


.landingcard .color-fans{
    background-color: #549FE5F2;
    opacity: 0.8;
}

.landingcard .color-venue{
    background-color: #FABF4D;
    opacity: 0.8;
}

.landingcard .color-artists{
    background-color: #FFB08B;
    opacity: 0.8;
}

.landingcard .buttons-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    display: flex;
    border-radius: 25px;

    align-items: center;
    justify-content: center;
    transition: height 0.3s, opacity 0.3s; 
}

.landingcard:hover .buttons-container {
    height: 70%; 
    opacity: 1;
}

When compiled, each grid looks like this (text added for clarity): https://i.sstatic.net/tMlwB.png

and when hovered over,

https://i.sstatic.net/sMpJY.png

Currently, when hovering, the entire colored section expands, causing text to move. How can I ensure that new content stays within the expanded area without shifting position? (similar to the image above)

htmlcss

Answer №1

When dealing with this particular element, I opted for a grid layout utilizing grid-template-rows with a fixed height value for the button. To ensure that the text remains hidden behind the panel when it shrinks, I employed the overflow: hidden property. The challenge arose when padding interfered with the design, prompting me to include a transition for that as well. Take a moment to review the code and share your thoughts. I made use of custom properties for clarity on functionality. Below is the annotated code snippet:

.container {
  --border-rad: 1rem;
  --custom-colour: #61A1D6;
  --button-height: 2rem;
  --transition-time: 500ms;
  position: relative;
  display: inline-block; /* adjust container size based on the image */
  border: 1px solid var(--custom-colour);
  border-radius: var(--border-rad);
  overflow: hidden; /* clip image and child divs within border radius */
}

.container > img {
  display: block; /* eliminate space for descenders */
  object-fit: cover;
}

.panel {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--button-height);
  display: grid; /* create 2 rows - top fits container, bottom is button height */
  grid-template-rows: 1fr var(--button-height);
  align-items: stretch;
  border-radius: var(--border-rad);
  background-color: var(--custom-colour);
  color: white;
  font-weight: bold;
  opacity: 0.8;
  transition-property: height, opacity;
  transition-duration: var(--transition-time);
}

.text {
  overflow: hidden; /* hide contents when height shrinks */
  padding: 0 1rem; /* set zero padding for top and bottom when hidden to prevent shifting buttons down */
  transition: padding var(--transition-time);
}

.buttons {
  /* Utilize simple 2-column grid layout for buttons */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  text-align: center;
}
.buttons :first-child {
  border-right: 1px solid white; /* add dividing line */
}

.container:hover .panel {
  height: 70%;
  opacity: 1;
}

.container:hover .text {
  padding: 1rem;
}
<div class="container">
  <img src='https://picsum.photos/id/28/300/300'>
  <div class='panel'>
    <div class='text'>Discussing the amazing experiences TuneHatch offers for fans looking for something new.</div>
    <div class='buttons'>
      <div>Events</div>
      <div>Join Now</div>
    </div>
  </div>
</div>

Answer №2

One suggestion to try is creating a button container that sits on top of an expandable content container:

<div className='container'>
    <div className='options-containers'>
        <div className='landingcard'>
            <div className='expand-container color-venue'>Content Expanded</div>
            <div className='buttons-container color-venue'>Buttons...</div>
            <img className='background-image' src={VenueBackground} alt="" />
        </div>
        <div className='landingcard'>
            <div className='expand-container color-venue'>Content Expanded</div>
            <div className='buttons-container color-venue'>Buttons...</div>
            <img src={BackgroundImage1} alt="Artists Picture" />
        </div>
        <div className='landingcard'>
            <div className='expand-container color-venue'>Content Expanded</div>
            <div className='buttons-container color-venue'>Buttons...</div>
            <img src={FansBackground} alt="" />
        </div>
    </div>
</div>

.landingcard{
    position: relative;
}

.landingcard img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 25px;
}


.landingcard .color-fans{
    background-color: #549FE5F2;
    opacity: 0.8;
}

.landingcard .color-venue{
    background-color: #FABF4D;
    opacity: 0.8;
}

.landingcard .color-artists{
    background-color: #FFB08B;
    opacity: 0.8;
}

.landingcard .expand-container {
    z-index:0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    display: flex;
    border-radius: 25px;

    align-items: center;
    justify-content: center;
    transition: height 0.3s, opacity 0.3s; 
}

.landingcard:hover .expand-container {
    height: 70%; 
    opacity: 1;
}

.landingcard .button-container {
    z-index:1;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:30px;
}

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

Using PHP to create redirects within an iframe

Imagine I have embedded an iframe to showcase a different website on my own site. However, when the displayed site contains a redirect that directs to other pages within its domain, this results in the entire browser being redirected to the external site w ...

phpjavascriptjqueryhtmliframe

"After completing the survey form, the User Details form is displayed upon clicking the submit button

In my Quiz, each question loads on a separate page with clickable options. Some questions may have multiple answers, including an "Others" option. At the end of the quiz, users need to fill out a form. Although I've created a survey form, I'm fa ...

javascriptjqueryhtmlcssforms

What is the method for centering text above and below an image in the vertical middle?

I'm struggling to create a vertical center-aligned image gallery on my website with "PREVIOUS" and "NEXT" links for easy navigation. Despite multiple attempts, I can't seem to get it right. Can someone guide me on how to achieve this effect? ...

htmlcssimagealignmentvertical-alignment

Issue: The component factory for GoogleCardLayout2 cannot be located

Recently I've been working on an Ionic 3 with Angular 6 template app where I encountered an issue while trying to redirect the user to another page upon click. The error message that keeps popping up is: Uncaught (in promise): Error: No component fac ...

javascripthtmlangularionic-frameworkionic3

Ensure that breadcrumb links remain on a single line by using text truncation in Bootstrap 5

For creating breadcrumbs in Bootstrap 5, the documentation suggests the following code: <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home ...

cssbootstrap-5

I'm not sure why, but for some strange reason, Markdown images refuse to display when surrounded by

Recently, I've encountered a strange issue where my markdown image tag doesn't display the image when wrapped in a <div> or a <section>. Instead, it just outputs markdown code. Take a look at this screenshot for reference. <sectio ...

htmlmarkdownjekyll

Creating a placeholder for a 'select' box that dynamically populates data from a MySQL database

I need help adding a placeholder to my dropdown menu populated with results from a MySQL database. Can anyone advise me on how this can be accomplished? <div class="select_drp"> <?php $query = mysql_query("SELECT * FROM training_lis ...

phphtml

Using jQuery to create overlapping images

Currently, I am working on an effect that involves overlapping images. The idea is that when a bar is clicked and dragged, the image underneath should reveal by adjusting its width. While my code functions, there are some glitches present. One issue is tha ...

javascripthtmljquerycss

Problem with jQuery Window Resize Trigger Not Reactivating

I am facing a challenge in integrating a slider within multiple jquery tabs. As the slider requires specific width and height to display correctly, I have to trigger a window resize event when the tabs are switched. Surprisingly, the code I implemented onl ...

javascriptjquerycsstabsslider

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Transforming traditional HTML table layout to modern div structure

We are currently in the process of transitioning old pages from our previous website structure, which used tables, to our new layout based on DIVs. Our website is structured using a PHP include system with separate components for the header, body, and foot ...

phpcsshtml-table

Guide to creating a smooth div fade transition with jquery on hover or mouseover

I have a div that is initially set to display:hidden. I am looking to change the display property to display:block when a specific element (#navbar li a) is hovered over. Below is the JavaScript code I have written for this functionality. $('document ...

javascriptjqueryhtmlcss

Ways to simultaneously apply fade in and fade out effects using CSS

body { background-image: url("background.jpg"); background-attachment: fixed; font-family: 'Roboto', sans-serif; color: #333333; } #container { height: 1000px; } /* HEADER WITH NAVIGATION BAR AND LOGIN OPTION */ #head { position: abso ...

javascriptjqueryhtmlcss

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui

Error 401: Unauthorized access to CSS files in MVC

Initially, I am aware that this issue has been discussed here before, but none of the suggested solutions have worked for me. I have encountered a problem with adding my own CSS files to a new web project I created. The default code template provided by VS ...

cssasp.net-mvc

Guide on altering the background color of a table row depending on the data in its cells with the help of AngularJS

I am looking to dynamically change the background color of a row based on specific cell data. If the first four characters in a table cell match a certain value, I want the entire row to change its color to red. Currently, my code changes the row color ba ...

javascriptjqueryhtmlasp.netangularjs

Tips on positioning items with a ChartBar using Chart.js alongside Alerts from Bootstrap 4

Greetings! I am facing a challenge with arranging a bar chart using Chart.js alongside bootstrap 4 alerts. The issue arises in the alignment of elements as depicted in this image: https://i.sstatic.net/4kDSo.png My goal is to position the alerts, located ...

c#htmlbootstrap-4chart.js

What is the best way to switch between components when clicking on them? (The component displayed should update to the most recently clicked one

I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to re ...

javascriptjquerycssreactjs

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml

Choose the option to eliminate the dropdown arrow in all web browsers

Although my code functions well in various browsers, I am experiencing an issue with IE. I have styled the select element, but I am unable to remove the default arrow in IE. <form> <label for="selectitem">Food Favorites</label> <selec ...

htmlcssformsselect