Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be doing wrong? Your assistance is greatly appreciated! The code snippet can be found below or you can view the page directly here

@media screen and (min-width:850px) {    
    .cards {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
    }
}


.card {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(102, 153, 102, .9);
    padding: 2rem;
    height: 6rem;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    cursor: pointer;
    transition: color 2s;
}

.cards a {
    text-decoration: none !important;
    color: white !important;
}

.cards .card:hover {
    background-color: rgb(102, 153, 102);
}

<h2 style="text-align: center;">List of Neuro-Ophthalmic Conditions</h2>

<section class="cards">
<div class="card"><a href="https://www.nanosweb.org/anisocoria"><strong><span style="font-size:16px;">Anisocoria</span></strong></a></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/GiantCellArteritis" target="_blank">Giant Cell Arteritis</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4166" target="_blank">Homonymous Hemianopsia</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/IIH">Idiopathic Intracranial Hypertension/ Pseudotumor Cerebri</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4188" target="_blank">Leber Hereditary Optic Neuropathy</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4155" target="_blank">Myasthenia Gravis</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/drusen">Optic Disc Drusen</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/PituitaryTumor">Pituitary Tumor</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/ThyroidEyeDisease" target="_blank">Thyroid Eye Disease</a></span></strong></div>

<div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/TransientVisualLoss" target="_blank">Transient Visual Loss</a></span></strong></div>
</section>
csshovercss-grid

Answer №1

To activate the hover effect on elements with the card class, use the :hover selector as demonstrated below:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 10px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(102, 153, 102, 0.9);
  padding: 2rem;
  height: 6rem;
  overflow: hidden;
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
  cursor: pointer;
  transition: color 2s;
}

.card:hover {
  background-color: #336699;
}

.cards a {
  text-decoration: none;
  color: white;
}
<section class="cards">
  <div class="card"><a href="https://www.nanosweb.org/anisocoria"><strong><span style="font-size:16px;">Anisocoria</span></strong></a></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/GiantCellArteritis" target="_blank">Giant Cell Arteritis</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4166" target="_blank">Homonymous Hemianopsia</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/IIH">Idiopathic Intracranial Hypertension/ Pseudotumor Cerebri</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4188" target="_blank">Leber Hereditary Optic Neuropathy</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/i4a/pages/index.cfm?pageid=4155" target="_blank">Myasthenia Gravis</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/drusen">Optic Disc Drusen</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/PituitaryTumor">Pituitary Tumor</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/ThyroidEyeDisease" target="_blank">Thyroid Eye Disease</a></span></strong></div>

  <div class="card"><strong><span style="font-size:16px;"><a href="https://www.nanosweb.org/TransientVisualLoss" target="_blank">Transient Visual Loss</a></span></strong></div>
</section>

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

What is the best way to achieve a never-ending vertically scrolling image using CSS?

I want to incorporate a vertically scrolling image similar to the one on Adam Whitcroft's amazing landing page. I have tried examining his source code, but I am unable to grasp how he achieved it. The concept is to have the "I'm a scientist" text ...

csscss-animations

Problem with keyframe animations in Internet Explorer 10

My CSS animation works flawlessly in all modern browsers, except for IE10 which is causing some trouble. It appears that IE is having difficulty properly rotating 360deg. I am still searching for a workaround that won't compromise the functionality in ...

internet-explorercssanimationkeyframe

Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem? function App() { return ( < ...

htmlcssreactjs

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

javascripthtmlcssbootstrap-4

Make the HTML element expand to the remaining height of the viewport

Need help with creating a section that automatically fills the remaining viewport height below the navigation bar. The section includes a centered div and background image, along with a button at the bottom for scrolling down by one full viewport height. H ...

cssviewport

Adjusting padding evenly across an unspecified number of columns

I'm currently facing a challenge with a multi-column layout. In a basic setup of three columns, I aim to adjust the padding so that each gap between the columns is consistent (2rem). However, the tricky part lies in crafting rules that can be applied ...

css

I am attempting to create a captivating image for a "jumbotron"

My goal is to achieve a full-width image that stretches across the entire website. Furthermore, I want the image to remain centered and shrink from the sides as the window size decreases. Here's what I've attempted: HTML <div class="site-ban ...

htmlcssimage

Aligning form fields in a HTML form using Bootstrap

In my extensive form, several fields within the setup encounter the same issue. Specifically, a checkbox below 'contact telephone number' causes the surrounding content to become misaligned. https://i.sstatic.net/8qI8Z.png My attempts to resolv ...

htmlcssbootstrap-4

Assess the equation twice using angular measurement

I am attempting to assess an expression that is originating from one component and being passed into another component. Here is the code snippet: Parent.component.ts parentData: any= { name: 'xyz', url: '/test?testid={{element["Te ...

htmlcssangularangular-material

Create a screen divided into two separate sections using horizontal split dividers

Trying to figure out how to set a div in HTML and then have a second div take up the remaining space. It seems like it should be simple, but I'm struggling with it. I'd like to have a div with a fixed height and then have another div take up the ...

htmlcss

The issue I'm facing with my CSS is that the Doctype is causing some styles to

Hey there! I've been pondering the use of !DOCTYPE html lately. I recently put together a basic webpage that looked great on most browsers except for IE. After doing some digging, it was recommended to me to use !DOCTYPE html. However, this ended up ...

htmlcssasp-classic

Utilize HTML/CSS for text that changes automatically

Is it possible to dynamically change text using HTML and CSS based on the page being viewed? For example, when on the home page, the text would automatically display "Home Page" without needing manual changes on each page. I want this process to be seamles ...

htmlcss

Developing a dynamic row that automatically scrolls horizontally

What is the best method for creating a div box containing content that automatically slides to the next one, as shown by the arrows in the picture? I know I may need jquery for this, but I'm curious if there's an alternative approach. oi62.tinyp ...

javascriptjqueryhtmlcss

Is there a way to apply a class to the main div once the checkbox has been clicked?

Whenever the checkbox is checked, it should add a class to the main div. Additionally, if I try to check another checkbox, the previously checked one should have its class removed and the new one should have the class added. Here is the code snippet for r ...

htmljquerycss

Adjust the height of the card body to match the horizontal bootstrap 5 card image

Is there a way to use Bootstrap 5.1.3 to make the image fill the height of the card's body and footer, while also ensuring the card-footer is placed at the bottom of the card? The desired outcome: <link rel="stylesheet" href="https://cdn.jsdeli ...

htmlcssbootstrap-5

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css

Browse through and review all information - utilizing python selenium

I am currently working on a project that involves scrolling and retrieving every post made by users. However, I am facing an issue where my code is only reading 2 or 3 posts before moving on to the next one. I have tried adjusting the sleep() duration, p ...

pythoncssseleniumdomscroll

Creating tiles that can be easily stacked to the side

Seeking a solution to a unique layout challenge, I am hoping for some guidance. After searching and not finding exactly what I need, I turned to this platform for help. I want to create a view where multiple boxes (divs) are contained within the same paren ...

htmlcss

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

javascripthtmlcss

Selectize-dropdown menu shines brightly as it opens upwards

In my sleek dashboard design, I have implemented a few dropdown menus using selectizeInput. These menus are currently positioned at the bottom of the page, but I want them to open in an upward direction instead of downward. While I found a workaround for ...

htmlcssrtwitter-bootstrap-3shiny