I'm struggling with creating animations for the bootstrap cards as a newbie. It seems quite complex for me. Can anyone provide guidance on how to achieve this

Explore this template for bootstrap cards here

The provided link features a template for bootstrap cards with horizontal sliding animations. I attempted to incorporate only the card properties into my code but encountered issues where the cards overshadowed everything else on the page. Despite adjusting the z-index for my header, I was unable to resolve this issue. Is there a way to extract just the card properties from the bootstrap template?

nav h1 { vertical-align: middle;
background-color: rgb(0, 0, 0); border: 10px solid rgba(0, 0, 0, 0); text-align: center; position: fixed; position: top; min-width: 100%; z-index: 3;

This is my CSS

IBAE-Information Library

<body>
    <nav>
        <h1 style="font-family:Helvetica;">
            <ul class="nav">
                <li><a href="#">menu1</a> ...

.logo img{ display:block; margin-left: auto; margin-right: auto; width:335px; height:114.666666666666667px;

}

body{ background: linear-gradient(to right, rgb(39, 38, 38), rgb(177, 72, 72),rgb(39, 38, 38)) }

This is my HTML

I attempted to integrate the animated bootstrap cards into my design but faced challenges as the cards dominated the layout even after removing the opacity property.

javascriptcsshtmlbootstrap-4

Answer №1

To achieve a card effect that appears to "jump," you can utilize the CSS property transform: scale within a :hover selector.

If you want to add shadows for visual effects, consider using a pseudo element with opacity controlled by :hover, and applying a box shadow.

.kitten {
  margin: 50px;
  max-height: 200px;
  transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.kitten:hover {
  transform: scale(1.2);
  transition: 0.2s all cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
}

.kitten:hover:before {
  opacity: 1;
}

.kitten:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
    transition: .15s all ease-out;
    opacity: 0;
    border-radius: 5px;
}
<img src="http://www.catster.com/wp-content/uploads/2017/12/A-gray-kitten-meowing.jpg" class="kitten" />

See it in action on JSFiddle

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

Rule for jQuery validation based on variables

I am facing an issue with validation of login asynchronously in my HTML form using the jQuery Validation Plugin. I would like to trigger a request for login validity on blur, and validate it upon receiving a response. Below is the code snippet: var login ...

javascriptjqueryvalidationasynchronous

What are some ways to streamline this D3 script?

My CSV data displays pass rates by organisation for different years: org,org_cat,2004_passed,2004_total,2005_passed,2005_total,2006_passed,2006_total GSK,industry,35,100,45,100,55,100 I am using D3 and aiming to create a dictionary of organisations struc ...

javascriptd3.js

Retrieving data from a stored procedure with XSJS and storing it in a variable

I am currently facing a situation where I need to pass a session user as a parameter to a stored procedure in order to retrieve a receiver value. This receiver value needs to be stored in a variable so that I can use it in another function within an xsjs f ...

javascriptnode.jsxsjs

What is the proper way to connect with the latest Set and Map objects?

Can Angular 1.* ng-repeat function with Set and Map new objects? Is there a roadmap to implement this integration? ...

javascriptangularjsecmascript-6

I'm having trouble getting the float left to work properly in my HTML/CSS code

Currently, I am diving into the world of HTML / CSS on my own. After following some tutorials, I have taken the leap to work on my very first project. My goal is to layout three images and three text elements on a single page using CSS. The desired struct ...

htmlcss

Utilizing Ajax in Rails 5: Trigger form submission upon clicking either of the two radio buttons via Ajax

Note: I have encountered similar questions before, but none of them match my specific scenario. Currently, I am creating a small Ajax form within my rails views using yes or no radio buttons. When I implement this form with remote: true, it functions corr ...

javascriptjqueryruby-on-railsajaxsimple-form

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

I want to adjust the number of columns based on the width of the screen rather than choosing a specific value like 3, 4, 5, or 6. ...

htmlcss

Tips for ensuring the position of buttons remains consistent no matter the size of the image

I am facing an issue with maintaining the button location when an image is added. My goal is to ensure that the button's position remains horizontal consistently. Front-end: React CSS framework: semantic-ui-react render() { return ( &l ...

htmlcssreactjs

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

Utilizing React Hook to fetch initial data in useEffect

Encountered a roadblock while attempting to update a hook when the web socket is triggered with new data. I noticed that the hooks are returning the default values I initialized them with inside my useEffect, whereas during rendering it shows the correct v ...

javascriptreactjsreact-hooks

What is the best way to indicate the region of a shape that intersects with another shape in

Picture yourself with an area and placing a camera lens or eye above it. What I'd like to do is create an eclipse on the area to show exactly what the lens or eye can see. So far, I have achieved this: https://i.sstatic.net/VHWc5.png You can interac ...

javascriptthree.jsgeometry

Using JQuery to execute a script on form elements added via ajax

I've encountered an issue with a form element that is fetched via ajax upon request. I'm attempting to make an ajax request on the dynamically inserted text box to find a location as it's being typed. Strangely, the code works for the first ...

javascriptruby-on-railsajaxjquery

What is the best place to define data that remains constant?

In a Vue component, I am looking to utilize data that remains constant. The issue arises when attempting to implement the following code: const numbers = [1, 2, 3] new Vue({ el: "#app" }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2 ...

javascriptvue.js

Error: $.noty is undefined

I have a section on my website that utilizes Noty for displaying notifications. Currently, I am loading Noty 2.4.1 (jquery-noty) along with jQuery 3.5.1 from a CDN (cdnjs) and triggering notifications using the following syntax: $.noty({text, timeout, type ...

javascriptjquerynoty

Dealing with Failed Axios Requests in React

I'm having trouble figuring out what I'm doing incorrectly. My goal is for the Main component to pass the ajax request method to the child component InputForm. The child component would then return the results, which will be stored in the state ...

javascriptajaxreactjsaxios

When should the preloader be placed within the DOMContentLoaded or load event?

I'm looking to implement a preloader on my website to ensure everything is fully loaded - images, JavaScript, fonts, etc. However, I'm unsure whether to use the following: window.addEventListener('DOMContentLoaded', () => { // code ...

javascripthtmlcss

How to easily align an image and blockquote vertically in CSS with automatic width for the blockquote

I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both ele ...

htmlcss

When applying json_encode to the PHP $_GET array, it returns a singular string instead of an array containing strings

I am attempting to utilize the PHP GET method in order to generate an array of keywords from a keywordBox field on a different page. For instance, here is how the keywords are added to the page URL: /searchResults.php?keywordBox=computing+finance Althou ...

javascriptphpjson

Dynamic website content updating using AJAX and PHP with seamless table refreshing

I'm really struggling to find a solution for this issue and it's frustrating that I can't even find one example! So, here's the situation: I have a monitoring system (PHP / MySQL) that is refreshed using Javascript. The problem is that ...

javascriptphpjquerymysqlajax