Hovering into Transition Time

My article card has a transition on the top attribute of the info div, which is supposed to be smooth and last for 0.3 seconds. However, the description suddenly appears during this transition. I'm trying to figure out why this is happening and how to fix it. Any ideas?

.article-card{
    background-image: url(" ")
    -webkit-box-shadow: 0px 0px 20px 1px #919191; 
    box-shadow: 0px 0px 20px 1px #919191;
    width: 30vh;
    height: 40vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.article-card-info{
    position: relative;
    top: 18vh;
    height: 10vh;
    background-color: white;
}
.article-card-title{
    color: #1a2434;
    text-align: center;
    padding-top: 2vh;
    font-size: 1rem
}

.article-card-description{
    display: none;
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 0.6rem;
    font-family: 'Zona Pro Thin';
    font-weight: 1000;
    color: #1a2434;
    margin: 2px;
}

.article-card:hover .article-card-info{
    transition: 0.3s ease;
    height: 15vh;
    top:13vh;
}

.article-card:hover .article-card-description{
    display: block;
    top: 1vh;
    transition: 0.3s ease;
}
<div class="article-card">
    <div class="article-card-info">
          <p class="article-card-title"> Title</p>
          <p class="article-card-description"> Description </p> 
     </div>
</div>

javascripthtmlcsscss-selectorscss-transitions

Answer №1

To create a smooth appearance for the description, you can utilize the opacity property.

.article-card{
    background-image: url(" ")
    -webkit-box-shadow: 0px 0px 20px 1px #919191; 
    box-shadow: 0px 0px 20px 1px #919191;
    width: 30vh;
    height: 40vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.article-card-info{
    position: relative;
    top: 18vh;
    height: 10vh;
    background-color: white;
}
.article-card-title{
    color: #1a2434;
    text-align: center;
    padding-top: 2vh;
    font-size: 1rem
}

.article-card-description{
    position: relative;
    top: 10vh;
    text-align: center;
    font-size: 0.6rem;
    font-family: 'Zona Pro Thin';
    font-weight: 1000;
    color: #1a2434;
    margin: 2px;
    opacity: 0;
    transition: 0.3s ease;
}

.article-card:hover .article-card-info{
    transition: 0.3s ease;
    height: 15vh;
    top:13vh;
}

.article-card:hover .article-card-description{
    top: 1vh;
    opacity: 1;
}
<div class="article-card">
    <div class="article-card-info">
          <p class="article-card-title"> Title</p>
          <p class="article-card-description"> Description </p> 
     </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

Exploring new possibilities in ChartJS with the use of multiple Y

I have successfully created a line chart using Chart.js with two datasets, each having its own Y scale and axis. The code for my datasets and options is as follows: datasets: [{ fill:false, label: 'Heat', yAxisID: "y-axis-1", da ...

javascriptangularchartschart.js

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

Incorporating JavaScript to dynamically load an HTML page into an iframe

I am attempting to have each option load a unique page within a frame <!DOCTYPE html> <html> <head> <script> function selectCountry() { var mylist=document.getElementById("country"); document.getElementById("frame").src=mylist.opti ...

javascripthtmliframe

Having issues with the functionality of the Material UI checkbox component

Having issues with getting the basic checked/unchecked function to work in my react component using material UI checkbox components. Despite checking everything, it's still not functioning as expected. Can someone please assist? Here's the code s ...

javascriptreactjsmaterial-ui

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

Contrasting {} and {} as any in TypeScript

Seeking clarity on TypeScript, what sets apart (foo and foo2) from (foo3 and foo4)? (foo and foo2) as well as (foo3 and foo4) produce identical results, yet during compilation, a red underline appears under foo2 and foo3. https://i.stack.imgur.com/lWaHc. ...

javascriptreactjsangulartypescript

JQuery Function for Repeatedly Looping through Div Elements

I've been experimenting with creating a loop that alternates the fade-in and fade-out effects for different elements. This is what I have so far: setInterval(function() { jQuery(".loop").each(function(index, k) { jQuery(this).delay(1200 ...

javascriptjquery

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

What is the best method to fetch a specific post from supabase for showcasing in a dynamic Route with Nextjs14?

I'm currently working on a Next.js application where I am fetching posts from a Supabase database. Everything works fine when retrieving all posts, but when trying to retrieve a single post dynamically using the ID, the screen displays null. Here&apos ...

javascriptnext.jsroutesdynamicsupabase

An issue arises when attempting to send form information through email using PHP

I'm facing an issue with sending email from a form. Every time I submit the form, I receive an "error occurred" message as specified in my if else statement. This prevents the mail from being sent. Can you help me troubleshoot this problem? Below is t ...

phphtml

Vacant area on the right side of the page

There seems to be an issue with the website where there is an empty space to the right, causing a horizontal scroll bar to appear at the bottom. Despite my efforts, I cannot seem to identify the root cause of this problem. While one solution would be to si ...

htmlcsswordpress

What is the source of the compiler options in tsconfig.json?

Currently utilizing Typescript in NestJs, I have incorporated various packages. However, the specific package responsible for altering these settings remains unknown to me: "checkJs": false, "skipLibCheck": true Is there a method to ...

javascripttypescriptnestjspackage.jsontsconfig

What steps should I take to transition from a table-based layout to a more semantic HTML structure with a CSS-based layout?

Looking at the image presented, a significant portion of the HTML code has been structured semantically, with CSS being utilized for overall aesthetics. However, despite concerted efforts, resorting to a table was necessary to ensure that the segment on th ...

csssemantic-markup

Hiding labels in an HTML document can be achieved by using CSS

Recently, I've been working on a code that relies on a specific Javascript from Dynamic Drive. This particular script is a form dependency manager which functions by showing or hiding elements based on user selections from the forms displayed. Oddly ...

javascripthtml

What is the best way to simulate an external class using jest?

My Vue page code looks like this: <template> // Button that triggers the submit method </template> <script> import { moveTo } from '@/lib/utils'; export default { components: { }, data() { }, methods: { async ...

javascriptvue.jsjestjs

Horizontally position the main word from the D3-WordCloud in the center

I am working on a WordCloud project and have utilized code from Jason Davies D3-JavaScript-WordCloud Example, which can be found at this link. The majority of the code I have used is from a helpful tutorial in German by Lars Ebert, available at this URL. ...

javascriptd3.jsalignmentcenterwords

Utilizing the require function to implement an AngularJS Controller without having

I've been working with requireJS in my application. Every time I try to register a controller on my module, it gives me an error saying that the controller is not defined. Here's the code for my LoginController located in login.controller.js: f ...

javascriptangularjsrequire

After the execution of the script by V8, which phase will be initiated first?

Scenario // test.js setTimeout(() => console.log('hello'), 0) setImmediate(() => console.log('world')) Simply execute node test.js using node v12.12.12 on an Intel MacBook Pro. The output may vary: hello world Sometimes it is: ...

javascriptnode.jsevent-loop

Angular Material's md-checkbox is a required component

I am working on a form that consists of checkboxes representing the days of the week. When the user hits submit without selecting any checkboxes, I want an error message to appear. Here is the HTML code snippet that I have: <form id="addEditForm" nam ...

javascriptangularjscheckbox

Overuse of jQuery's preventDefault() and stopPropagation() functions

A recent discussion with a coworker revealed some contrasting coding practices, mainly concerning his extensive use of the two aforementioned methods in event handlers. Every event handler he creates follows this same pattern... $('span.whatever&apos ...

javascriptjquery