Attempting to show information upon hovering using CSS and keyframes

After creating a display that matched my boss's request for a "flat tile" look using only CSS, he suddenly changed his mind and now wants the text to slide out while keeping the image in place. You can see my progress here.

I initially tried floating the description div and making it relative to the bottom of the container div, hoping that when the container expanded, the text would slide down. Unfortunately, this approach didn't work as expected.

Here is a snippet of the CSS code:

    /* PRE-HOVER ROSTER APPEARANCE */
div.dude {
    background-color: #82b2cd;
    float: left;
    margin-left: 50px;
    margin-bottom: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
div.dude > :first-child { /* DESCRIPTION */
    font-size: 14px;
    opacity: 0;
    text-align: center;
    height: 200px;
    color: #ffffff;
    transition: opacity 1s linear;
}
... (more CSS code)

And here is a snippet of the HTML code:

<div class="bs-docs-grid">
    <div class="row">
        <div class="dude span4">
            <div><h5>Scott Sheridan</h5></br><i>English as a Second Language</i></br>Marianapolis Preparatory School</br>Thompson, CT</div>
            <div style="background-image:url('http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg');"></div>
        </div>
        ... (more HTML code)
    </div>
</div>

Answer №1

If you want the description text to smoothly slide over the image (without affecting the image's position), one method is to place the description within an absolutely positioned div. Position it with top:-200px above its parent element, and then use top:0 when the parent is hovered over or focused. You can see a functional example of this approach here: http://jsfiddle.net/YXuk9/113/.

While implementing this solution, consider making some changes to your code to streamline the process. It's generally recommended to structure your HTML using IDs and classes, rather than relying on nth-child selectors. This practice enhances readability and maintainability of the code.

<div class="profile">
    <img class="photo" src="http://exitticket.org/wp-content/uploads/2013/10/ssheridan.jpg" alt="Scott Sheridan" />
    <div class="description">
        <h5>Scott Sheridan</h5>
        <span class="subject">English as a Second Language</span>
        <span class="school">Marianapolis Preparatory School</span>
        <span class="location">Thompson, CT</span>
    </div>
</div>

This structured HTML clearly defines the purpose of each element, facilitating easy identification in CSS. Consequently, you can simplify your CSS rules:

.profile {
    position:relative;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
    float:left;
    margin-left:50px;
    margin-bottom:20px;
}

.photo {
    width:100%;
}

.description {
    background-color:#82b2cd;
    position:absolute;
    top:-200px;
    left:0;
    color:white;
    padding:10%;
    height:100%;
    transition: all 0.3s ease-in-out;
}

.description span {
    display:block;
}

.profile:hover .description, .profile:focus .description {
    top:0;
}

By clearly labeling each CSS rule with the corresponding element, the code becomes more straightforward. Unnecessary styles have been omitted to focus on addressing the issue at hand.

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

The utilization of `ngSwitch` in Angular for managing and displaying

I am brand new to Angular and I'm attempting to implement Form Validation within a SwitchCase scenario. In the SwitchCase 0, there is a form that I want to submit while simultaneously transitioning the view to SwitchCase 1. The Form Validation is fun ...

Can the first row of a flex-box begin in the second column and end in the third column?

Can a layout be created with two rows and three columns without adding any extra elements using the flex property or any other method? .parent{ display:flex; flex-direction:column; } .child1{ background:lightblue; } .child2{ display:flex; border:1px ...

What could be causing my CSS navigation toggle button to malfunction?

My attempt at creating a toggle button for tablets and phones seems to be failing. Despite the javascript class being triggered when I click the toggle button, it is not functioning as expected... https://i.stack.imgur.com/j5BN8.png https://i.stack.imgur. ...

"Encountered an HTTP 400 error when trying to retrieve content from a Persian URL using file

As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...

Mpdf does not support inline CSS rendering

I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...

Configuring Node.js and express.js for my personal website to showcase my projects

I am new to node.js and I'm excited to implement it on my personal website as a way to start learning. I have successfully set up the node server, but I am struggling with setting up routing using express.js. All my files are typical static files like ...

What could be causing the flex item to overstep its bounds in the mobile view?

Just starting to dive into the world of CSS and HTML, I am currently experimenting with FlexBox. I have encountered an issue with my layout and I can't seem to figure out why my second div (.rightContainer) is overflowing its parent. I have tried remo ...

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

Update the color of the text depending on the background color

When hovering over my CTA, a sliding effect occurs. However, I am facing an issue with the text being difficult to read depending on the background color. To better understand what I'm trying to achieve, you can view the demo here: Demo on CodePen T ...

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

I'm a beginner with selenium. Can someone explain how to locate an element that has multiple classes and values? <div class="md-tile-text--primary md-text">Getting Started</div> using the findElement method By .css Selector. ...

The Bootstrap column and row elements are having difficulty cooperating with their respective parents and children

Bootstrap functionalities like -xl are working, but when I use multiple classes such as col-lg-4 and col-md-4, they do not align in one row. I have already set the parent to row and the child to col, but they are still not displaying correctly. Images th ...

Position the center button on the Bootstrap navbar while keeping it outside the collapse menu

I want a button in the navbar that: stays inline with other navbar items (doesn't go to the next line); sits outside of the collapsed navbar section; and remains centered on the page for all screen sizes, even when the right side of the navbar is c ...

Erase a set of characters with the press of the backspace key (JavaScript)

Within my textarea, I have lines that start with a number and a period: <textarea autoFocus id="text-area"wrap="hard" defaultValue ={this.state.textAreaVal} onKeyUp={this._editTextArea}/> For example: Line 1 Line 2 Line 3 I've created a ...

What can be done to repair the gallery on this webpage?

Currently, I am experimenting with the Aria template, a free Bootstrap-based template. My goal is to utilize the gallery feature without any accompanying text. However, even after removing the text from the lightbox, the white background persists. What I s ...

The attribute aria-required is necessary for a radio group

When creating a required radio group, how should the aria-required="true" attribute be assigned? Specifically, I have multiple <input type="radio"> elements with the same name grouped under a <fieldset>. Should the aria-required be placed o ...

Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt t ...

Newbie's Dilemma: Issues with Html, Email, and Distribution Lists

I am looking to add a new feature to my website where users can enter their email address to receive a free promotion and be added to an announcement list. Since I don't have any experience with web programming, I'm not sure where to start. Would ...

Troubleshooting an issue with IE regarding box-shadow CSS functionality

I have a problem with my website design where the box-shadow effect on the top menu is not displaying properly in Internet Explorer. I tried adding specific code for IE8 and lower versions to fix this issue: zoom:1; /* This enables hasLayout, which is nec ...

Steps to implement provided information in a post within the header of a webpage

Recently, I started creating websites from scratch and I encountered a problem that I could use some help with. The issue is when I have a YouTube video embedded in a post, but I want to showcase the video in the header section of that specific post URL wi ...