What is the trick to utilizing CSS transitions to enlarge the font size of a Bootstrap card when it is hovered over

I'm having trouble increasing the font size and changing the color on hover for text inside a Bootstrap card. My current code only changes the color without adjusting the font size or implementing any transitions. I don't have much experience with frontend development, so I appreciate any help in pointing out my mistake. Here is the CSS and HTML I am working with:

CSS

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: font 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: white;
}

HTML

<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            foo bar 
        </h6>
    </div>
</div>

I'm looking for guidance on how to achieve the desired transition effect.

htmlcssbootstrap-4

Answer №1

To adjust the font size, simply apply the H6 tag within the CSS styling

#group .box {
  border: none;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;

  transition: font-size 0.5s ease-in-out;
}

#group .box:hover h6 {
  font-size: 1.5rem;
  color: blue;
}

Answer №2

Here is a CSS update for the section below.

.card:hover .font-weight-normal{
  font-size: 1.3rem;
  color: white;
}

Answer №3

Here is the solution for you :)

#team .card {
  border: none;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
  color: grey;
  font-size: 1rem;

  transition: 1s ease-in-out;
}

#team .card:hover {
  font-size: 1.3rem;
  color: red;
}
<div id="team">
<div class="card bg-dark shadow">
    <div class="card-img-overlay d-flex align-items-end justify-content-end">
        <h6 class="font-weight-normal">
            Lorem ipsum
        </h6>
    </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

Pictures displaying various shapes in contact with each other

I have a unique challenge involving an image that has been physically cut into puzzle-shaped pieces. Is there a way to align these individual puzzle pieces using only HTML and CSS to create the illusion of a single cohesive image once assembled? It' ...

htmlcss

The items are misaligned in a horizontal position

The 4 divs are styled with a width of 23% and displayed using inline-block. They have a fixed height of 220px and no margin applied. However, the issue arises as they are not aligning horizontally Despite attempting to adjust the height and width paramete ...

htmlcss

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Looking to boost the height of ngSelect options?

Need help with adjusting the dropdown height for the ng-select form image. Currently, it is only displaying 5 items and I would like it to show 8-10 items. Below is the code I am using: <form [formGroup]="addReportForm" class="form-hori ...

cssangulardrop-down-menudropdown

Can I inspect the HTML source of GWT?

How can I access the HTML source code generated by GWT? Currently, I only see the DIV with a specific ID when viewing the source. Is there a way to view the entire HTML output? Is it possible to design my table in HTML using divs and lists, then wrap it i ...

javahtmlgwt

What is the best approach to display the combined values of two columns (last name + first name) in a C# .NET

Explanation I am looking to display the first name (column 2) and last name (column 3) of customers in the same row within a select list. Details of the SQL table for Customer { Id, first name, last name, age } Inquiry Is there a way to achieve this? ...

asp.net-core.net-corebootstrap-4

Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...

javascriptjqueryhtmlcss

Filter dates within a range using two input fields in AngularJS

I am trying to use two input fields to display data within a specific range of dates using the AngularJS date filter. (Range filter for AngularJS dates using two input fields) Check out my code below: var app = angular.module('app',[]).control ...

javascripthtmlangularjs

The select element is displaying with a different width compared to its sibling, causing the Bootstrap spacing to over

Working on styling an input form using Bootstrap-4. I have an input field and a select field, both having the class "col" with different spacing classes. However, the select field appears slightly smaller. When I assign the class "col-6" to both fields, t ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to increase padding beyond p-5 for specific screen sizes?

I need help creating a webpage that is responsive in design. Below is a snippet of the specific section I am working on: <div class="container-fluid"> <div class="row p-3 p-lg-5"> <div class="col"&g ...

htmlcssbootstrap-5

Exploring ways to cycle through an array of objects during a jQuery ajax request

When making a jQuery ajax call to iterate over an API response, I am encountering the issue of receiving undefined data for all elements. Can someone guide me on how to properly iterate through an array of objects in jQuery? I am new to handling iteration ...

javascripthtmljqueryajaxbootstrap-4

What is the best approach to managing undefined properties retrieved from the html in my Angular application prior to obtaining data from my controller?

Every time my Angular component HTML renders, I encounter numerous errors that all look similar to this ERROR TypeError: Cannot read properties of undefined (reading 'someProperty') Throughout my HTML page, there are many bindings that follow ...

javascripthtmlangularangular-templateangular-template-form

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

My current code snippet is displayed below. On smaller mobile screens, all 7 tabs are not visible at once and instead appear in two rows which looks messy. I want to modify the display so that only 3 tabs are visible at a time and can be scrolled through. ...

javascripthtmlcssionic-framework

Input the chosen icon list values into a designated box

As a beginner in the world of Javascript, I am venturing into creating a password generator that involves using icons. The concept is simple - by clicking on any number of icons from a list, the corresponding hex code will be displayed in an input box. The ...

javascriptjqueryhtml

The loop in MVC is not functioning properly when dealing with various MapRoutes

I am new to MVC and have a good understanding of C#. While experimenting with MVC in Visual Studio, I encountered an issue that is puzzling me. I am struggling to identify the cause of this error. My goal is to print a variable n number of times. It works ...

c#htmlasp.net-mvcasp.net-mvc-5

Switch between GeoJSON layers by using an HTML button within Mapbox GL JS, instead of relying on traditional links

I am currently developing a web map that requires toggling two GeoJSON layers on and off. In the past, I used Mapbox JS to accomplish this task by adding and removing layers with a custom HTML button click. However, I am facing some challenges in achieving ...

javascripthtmlcssmapbox-gl-jsmapbox-gl

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

When resizing, the image problem does not transition to the next column

Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to ...

htmlcss

Calculate averages of an array and show them when the page loads using Vue

In my coding project, there is an array named products that follows this specific structure: { "_id": "150", "name": "Milk", "description": "Skimmed", "price": "10", "ratings": [ ...

javascripthtmlvue.js

What is the best way to navigate to a component from a different component in Angular?

After spending countless hours, even a couple of days, trying to solve this issue, I still can't find a solution. I've exhausted all options and haven't come across a similar case. My goal is to smoothly scroll to another component on my on ...

javascripthtmlcssangular