What could be causing the hover effect to not work on the cards in my Svelte component? (HTML+CSS)

Greetings everyone! This is my debut post on this platform, and I'm in urgent need of assistance as I am relatively new to the world of programming.

I've been trying tirelessly to implement a hover effect on these cards, but for some reason, it just won't cooperate. I experimented with adding the hover effect to various classes without success. It seemed to be functioning well until certain modifications were made to the Bootstrap responsive elements (col-md, col-lg, etc).

Below is the Svelte component code for your perusal:

<h1 class="text-center text-light my-5 animate__animated animate__fadeInDown">
  Projects
</h1>

<div class="container mt-5">
  <div class="row justify-content-center align-items-center">
    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInLeft"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-fill"
          width="150"
          height="150"
          src="/img/justme.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >This Portfolio</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-between align-content-center my-2"
          >
            <img src="/img/svelte.svg" height="40" alt="Svelte" />
            <img src="/img/javascript.svg" height="40" alt="JavaScript" />
            <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
          </div>
        </div>
      </div>
    </div>

    <!-- Add more cards here with the same structure -->

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInLeft"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-fill"
          width="150"
          height="150"
          src="/img/countries.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >Countries App</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-between align-content-center my-2"
          >
            <img src="/img/angular.svg" height="40" alt="Angular" />
            <img src="/img/typescript.svg" height="40" alt="TypeScript" />
            <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4">
      <a href="">
        <div
          class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInRight"
        >
          <!-- svelte-ignore a11y-img-redundant-alt -->
          <img
            class="card-img-top object-fit-cover"
            width="150"
            height="150"
            src="/img/giphy.webp"
            alt="Card image"
          />
          <div class="card-body">
            <strong
              class="card-text d-flex justify-content-center align-items-center"
              >GIFs App</strong
            >
            <hr />
            <div
              class="container d-flex justify-content-between align-content-center my-2"
            >
              <img src="/img/angular.svg" height="40" alt="Angular" />
              <img src="/img/typescript.svg" height="40" alt="TypeScript" />
              <img src="/img/bootstrap.svg" height="40" alt="Bootstrap" />
            </div>
          </div>
        </div>
      </a>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 mb-4" id="carta">
      <div
        class="card bg-black text-light border-opacity-25 border-light animate__animated animate__fadeInRight"
      >
        <!-- svelte-ignore a11y-img-redundant-alt -->
        <img
          class="card-img-top object-fit-cover"
          width="150"
          height="150"
          src="/img/twitterdb.webp"
          alt="Card image"
        />
        <div class="card-body">
          <strong
            class="card-text d-flex justify-content-center align-items-center"
            >Twitter Database</strong
          >
          <hr />
          <div
            class="container d-flex justify-content-center align-content-center my-2"
          >
            <img src="/img/mysql.svg" height="40" alt="MySQL" />
          </div>
        </div>
      </div>
    </div>

    <!-- Add more cards here with the same structure -->
  </div>
</div>

<style>
  .card {
    height: auto;
    max-width: 280px;
    min-width: 160;
    overflow: hidden;
    border-radius: 15px;
    background-image: linear-gradient(
      135deg,
      rgb(255, 255, 255, 15%),
      rgb(21, 25, 31, 0%)
    );
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .card:hover {
    filter: drop-shadow(0 0 0px rgb(255, 255, 255, 100%));
    transform: scale(1.05);
    
  }

  @media (max-width: 767px) {
    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .col-sm-6 {
      flex-basis: 50%;
    }
  }
</style>

Your insights and guidance on why the hover effect seems to have stopped working would be immensely appreciated.

Thank you in advance, and please pardon any language errors as English is not my native tongue (I'm from Spain).

Despite my efforts to include the hover effect in almost all divs, nothing seems to yield positive results.

javascripthtmlcssbootstrap-5svelte

Answer №1

Consider utilizing the following code snippet

.card::hover{
   box-shadow: 0px 10px 10px #ddd;
}

Implementing this can enhance the hover effect on your elements

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

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

I noticed that the scrollbar in my fancybox is not showing up on iPad, but it does display when using Google Chrome on Desktop. You can find the page here. The issue seems to be with the vertical scroll bar not appearing on iPad. Has anyone encountered th ...

jqueryhtmlcssipadfancybox

Having issues initializing jQuery knob on a jQuery mobile webpage

I'm trying to implement the jquery knob plugin to showcase a circular rating system, but I'm encountering difficulties in getting it to display properly. Below is the code snippet I'm using - can someone please point out what's causing ...

javascriptjqueryhtmlajaxjquery-mobile

Is it a mistake in the Jquery logic or a syntax error?

Is there a logic or syntax error causing one of the options when clicking the radio to not display the corresponding tables with the same number of option dates? <style> #ch2 ,#ch3 ,#ch4 ,#ch5 ,#ch6 ,#ch7 ,#ch8 ,#ch9 ,#ch10 ,#c ...

jqueryhtml

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

javascriptjsonangulartypescriptwebpack

Bootstrap table malfunctioning following completion of ajax request

I am currently facing an issue with my ajax call in my MVC project. Whenever the user clicks on a value using the select, it updates two tables in the project. However, I have noticed that on every other call, the button functionality on the tables breaks. ...

javascriptc#.netajaxbootstrap-5

Using an expression from the parent controller to disable an item in an AngularJS directive

I created a list of custom directive items, each with a remove button. The issue I'm facing is that I want to disable the remove button when there's only one item left in the list, but it's not working as expected. To see this problem in ac ...

javascriptangularjs

Utilizing Weather APIs to fetch JSON data

Trying to integrate with the Open Weather API: Check out this snippet of javascript code: $(document).ready(function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { $(".ok").html("latitude: " + ...

javascriptjson

Tips for downloading a file using a Django function triggered by JavaScript instead of redirecting to the URL

Managing a page with multiple buttons that trigger various functions, such as sending an SMS (via API), emailing a file, or downloading a PDF. The button actions are powered by Ajax requests through JavaScript instead of using forms. I initially used Java ...

javascriptpythonajaxdjango

Calculate the total value of a certain field within an array when a specific condition is satisfied

I have two sets of data. I am looking to calculate the total time_spent for each course_id that appears in both set 1 and set 2. let set1 = [ { instructor_id: 7, course_id: 19, lesson_id: 1, time_spent: 0 }, { instructor_id: 7, course_id: 19, lesson_ ...

javascriptarrays

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

Protractor: The top tool for testing AngularJS applications

Protractor is a comprehensive testing framework designed specifically for Angular applications, utilizing WebDriverJS as its foundation. As someone who is just beginning to explore web testing, I am curious about the benefits of choosing Protractor over u ...

javascriptangularjsselenium-webdriverprotractor

Obtaining the "match" object within a Custom Filter Selector on jQuery version 1.8

Here's a helpful resource on Creating a Custom Filter Selector with jQuery for your reference. A Quick Overview: If you're unfamiliar with jQuery's Custom Filter Selectors, they allow you to extend jQuery’s selector expressions by addi ...

javascriptjqueryjquery-selectors

Tips for avoiding content appearing beneath overlapping elements

I am facing an issue with a hero image that has an overlapping box. I want to add content below the box but it ends up appearing behind the box. How can I ensure that the content shows below the box while maintaining responsiveness? .shell { display: ...

htmlcssflexbox

How to Send jQuery ajax Requests with Multiple Buttons in a PHP Form

My current issue is as follows: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <form id="roomform" action="room.php" method="POST"> <b ...

javascriptphpjqueryajax

A guide on retrieving data from an API and displaying it using AngularJS

REACT $state.saveData= function(productfilter){ var url = CONFIG.apiUrl + '/product'; window.open(url); window.print(url); }; CSS <button onClick="saveData(productfilter)" type="button">Print</button> ...

javascriptangularjsangularjs-directiveangularjs-scope

What method is the most effective for extracting the first line of a file in Node.js quickly?

If you are faced with multiple lengthy text files and your goal is to extract data solely from the first line of each file (without delving into the rest), how would you recommend achieving this efficiently using Node.js? Appreciate any suggestions! ...

javascriptnode.jsstreamfilesystemstext-files

The Fullpage.js embedded in an iframe is experiencing difficulty scrolling on iOS mobile devices

Trying to use Fullpage.js for a website with unique sections on different domains using full-screen iframes. However, encountering issues with scrolling on IOS mobile devices. The first solution rendered the page completely unscrollable: <iframe src=" ...

htmlioscssiframefullpage.js

Avoid unnecessary re-renders in ReactJS Material UI tabs when pressing the "Enter

I've created a user interface with tabs using material-ui in reactJS. The issue I'm facing is that every time a tab is selected, the content under that tab reloads, causing performance problems because there's an iFrame displayed in one of t ...

javascriptreactjsmaterial-ui

Dealing with a socket.io CORS problem

After deciding to implement a websocket on my website, I opted to utilize the socket.io library. However, I've encountered a CORS error: Access to XMLHttpRequest at 'http://localhost:2021/socket.io/?EIO=4&transport=polling&t=NlbFGS2&apos ...

javascriptnode.jssocketswebsocketsocket.io