poplatrainer.blogg.se - Css hover effects to make card jump

#Css hover effects to make card jump full#
#Css hover effects to make card jump code#

We made top part of the image rounded by using class, rounded-t-lg. To achieve this, we add class, object-cover. We want to maintain the original size of the image but also want it to fit into the container.

#Css hover effects to make card jump full#

It will occupy the full width of the container due to class w-full. We then added an image file.įor the image to fit perfectly into the container, we added a height class h-60 which makes the image occupy a height of 240px in the container. Use card components to easily show blog posts, merchandise, functions,įrom the snippet above, we created a containment as we had done previously. We will add an image of the product at the top of the card, and other information following below it as shown below: We are creating an advertisement card for a product. The card will be next to the first and second card. Lastly, we added a hover effect which changes the background color and the text to green. The padding is used to increase the clickable space of each item. We have added a padding of 12px all round to add space between the menu items with class p-3. flex class in each tag is used to make the icons and the text vertically aligned. We have also added SVG icons to our menu items. tags have been used to create the links for our menu items. We have given it a header Menu Items using, as shown above.

#Css hover effects to make card jump code#

The code for the menu card is shown below: The card contains links (menu items) which the user can interact with. Building a menu component cardĪs mentioned earlier, we have created a menu component in form of card. I will only explain the classes that we have not used above in the subsequent cards. We have used most of the classes that I have explained above.

border-green-500 adds a green border around the button.

hover:bg-green-500 adds a hover effect that changes the background color to green.

rounded-lg makes the edges of the button have a rounded look.

We have added space on the top margin by using mt-5.

To increase the width and height of the buttons, we have used py-2 and px-4.

This is what the classes we have added to the buttons do: To the footer, we have made the class text-center to center the buttons, and class space-x-5 adds space between the two buttons. We made the text color gray with text-gray-500 and added space on the left and right side of the text using px-4.įor the footer, we have used element, then added two buttons for user interaction. We have made the text to be semi-bold with font-semibold, increased the font size to 18px with text-lg, and added space at the bottom of the header with pb-5 as shown below:Īfter the header, we have added some text with a tag. We will do the same to the subsequent cards later on. We have then added another container to enable us add space around the components that will be inside our card. Lorem ipsum dolor sit amet, consectetur adip!įrom the code above, we have created the container into which the components of the card will be contained.