September 19, 2019
How to Create Bootstrap Card Hover Effect ( jQuery )

How to Create Bootstrap Card Hover Effect ( jQuery )


Hey everyone, its akshay and welcome to daily
tuition youtube channel. In this tutorial we are creating this simple
bootstrap card with hover shadow effect. First we will create bootstrap card. Then add shadow and also create a hover in
hover out effect with jquery. So, before we start this tutorial. If you are newer on this channel then definitely
click on the subscribe button and press the bell icon. And also don�t forget to press like button
Let�s head on to the tutorial. So before we getting let let�s get started. Create a project file in visual code editor
and add some stock images in the stock folder. In this tutorial we are using three images. Now, Create an html file call index.html. And Just after that we will create style.css
file. In this file we will add html snippets and
change the title of the page. Then we add bootstrap css file. So just copy this cdn and paste it in the
head. After that we will link style.css file also. And then insert script tag to add js files. You will see bootstrap was using jquery slim
file. We want to remove this file and add jquery
min.js file. Because the slim file doesn�t have an animation
function in it. To create hover and hover out effect we are
using animate function. So to use this function we will remove this
file and use jquery.min.js file. Just copy this and paste it here. Now we will create bootstrap card. To create this we will add div with container
class. Then we will add row and in this row we create
three columns. All this three columns contains a single card. Now we will create bootstrap card. You can just copy this bootstrap card code
from then bootstrap website but the best practice is to write down this code manually. So we create div with card class and add style
width 18 rem. In that card we add an image tag and specify
image source. Then just specify alt text and add class card
img top. Then we will create a body part of the card. So we will add div with the class card body. In the body we insert h5 heading level tag
with the card title class. After that we will add paragraph tag and insert
some demo text. So I will copy this demo text from this website
and paste it in the paragraph. after that we will add anchor tag with the
button primary class to create bootstrap primary button. And name this button as read. Now run your project. I had installed live server extension so I
will just right click on this file and select open with liver server. Ok now the first card is created. Now we will create the second card in the
second column. To create second card we create div with card
class and add width to it. Then create img tag and specify image source,
alt text and class. And then create body part of the card. So create div with card body class and add
h5 heading level tag with card title class. And add portfolio text. Then create paragraph with card text class
and add some demo text. After that create bootstrap primary button
at the bottom of the card. That�s it. Our second card is created. Now we will create third card. To create this we will copy the second card
code and use it for creating third card. So just copy this and paste it in the third
bootstrap column. And only change source image and card title
text. Now all three cards were created. I wanted to add some margin to these cards. So I will add margin left to the second card
and also add margin left to third card. And I also want to center these cards so I
will write some code in style.css file. In style.css file create container class. And add margin top 8 percent and margin left
8 percent. So now we had centered these cards. Afterwards, we will create shadow hover effect
to these cards when user hover it. So in the style.css we will add card colon
hover. And add webkit box shadow and specify shadow
values with rgb alpha color. We first add this property for firefox and
chrome. And then specify normal css property. Ok now hover shadow effect is working properly. But we wanted to add some more effect to this
card. So we will create script tag and create some
jquery functions that perform hover in and hover out effect. So we will first add document ready function. This function run once the page DOM is ready
for javascript code to execute. Then we will add jquery selector and specify
column four. And create hover function. So on the first parameter of hover function
we will add function. This function will execute when you hover
the mouse over the html element. In this function we will call this dot animate
function. And specify CSS margin top minus equal to
1 percent. So this property remove margin 1% margin from
top when we hover the element. You can specify more than one CSS property. And specify duration to determine how long
the animation will run. After that we create second parameter for
hover function. So we will add comma here and create function. This function will create hover out effect. So when you move mouse cursor from the element
this function will execute. So the function is same which we created before
but we specify margin top 0 percent. This function fire when we hover out mouse
over the element. So this function remove margin top 1 percent
from the element and return to the default margin 8 percent which we define in the Style.css
file. And the specify duration. Close the statement with semi colon. And run project. You will see this function is not working
because we specify jquery.min.js file after this function. So when page load script function will execute
first and then jquery file will include. So to solve this problem we will remove jquery
file from the bottom and insert it in the head. So when the document is loaded jquery file
will include first and then our script function execute. So when you run project you will see this
wonderful effect. You can add this effect to any of the html
element. So that�s it. We had created this wonderful hover effect
on the card. You can use this effect on your website or
blog. If you have any question on your mind then
comment me in the video comment section. And also don�t forget to like this video
if it is helpful to you and press subscribe button with bell icon. We will see you in the next video. Till then be happy and thank you for watching.

21 thoughts on “How to Create Bootstrap Card Hover Effect ( jQuery )

  1. Followed your video step by step but the hover effect is not animated. The shadow is working but it's not animated. Help?

  2. Nice tutor sir
    I have use it in my wordpress page template and card is working but it is not display in horizontal it is display vertical what is the solution

  3. Hey, only the shadow worked, the animation didn't. I checked the code and couldn't find a mistake. Could you help me?

  4. need help in creating a blog-post carousel. like recent blog event showed in a slider/carousel. Can you help me?

  5. Thank you for the tutorial! Very helpful!
    However I am having some issues:
    I have several rows of 3 cards stacked horizontally, and the hover effect works on the first top row of 3, however it stops working on the next row. The issue is that I have added a "mt-4" class to the bottom rows to create a bit of a margin in between each card vertically so it looks better, however for some reason that makes the jquery script stop working for those cards.
    Any ideas on why this happens?

  6. So it seems this method can't be used with cards that use Bootstrap's spacing classes like .m-* (e.g. mt-3) coz of how they define all their property values with *!important*, making it overwrite any changes made with the jquery animate() function, which unfortunately cannot use !important itself.
    So as far as I've found, you gotta avoid using their spacing class for the properties you wanna animate (use custom style instead) or to switch/toggle classes instead (which probably won't be a smooth animation) :/ would love to know a better way.

    EDIT: just ended up using css, works well enough:

    .card{
    transition: all 100ms;
    }
    .card:hover{
    margin-top: <decreased margin> !important;
    margin-bottom: <increased margin> !important;
    …box shadows…
    }

Leave a Reply

Your email address will not be published. Required fields are marked *