This is an example of a price table with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The table consists of three price columns. The pricing table is given the styles of background as #fff, box-shadow as 0px 0px 25px 0px #f5f5f5, padding as 30px 40px, color as #303030, position as relative, and border-radius as 10px. The price card title has the styles of border-bottom as 1px solid #d9d9d9, padding-bottom as 5px, and text-transform as uppercase to automatically convert the text to uppercase, whereas the price label is given the styles of font-weight as 900, font-size as 62px, display as inline-table, and margin as 30px 0 20px 0. In a hover event, the pricing card changes its background color to #497cbf, font color to #fff, with a transition value of all 0.35s, and a transform value of scale(1.05, 1.05). The Read More button is given a background of background: #497cbf, border radius as 100px, and text-transform style as uppercase, which takes the styles of border as 1px solid #fff, and font color as #fff, in a hover event. Source: https://www.tolmatol.com/price-table/

This is another example of an Our Services card layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL. The section title is given the styles of padding-bottom as 25px, text-transform as uppercase to automatically convert the text to uppercase, font-weight as 600, and font-size as 30px.The service section content has the styles of max-width as 450px, font-size as 16px, and line-height as 30px. Each service section is given an overlay section which has the styles of visibility as hidden, opacity as 0, background as linear-gradient(to right, #2196F3 0%, #64B5F6 100%), box shadow as rgba(0, 0, 0, 0.10) 0px 15px 45px 0px, transform as translateY(20px), and transition as .4s. In a hover event, the overlay section changes its opacity to 1 and gets a transform effect of translateY(10px), and gets displayed over the service section. Source: https://www.tolmatol.com/bootstrap-snippets-our-services-using-html-css/

This is an example of an image gallery layout with expanding hover effects, designed using HTML, CSS, and Bootstrap framework 4. The gallery consists of five image cards with different styles. The images are imported to the code with their URLs. The container is given the styles of width as 100vw, height as 100vh, display as flex, and box-sizing as border-box. The image card is given the styles of width as 20vw, color as #fff, text-align as center, line-height as 100vh, flex-grow as 1, background-size as cover !important, background-position as center, transition as 1s, and background-repeat as no-repeat. In a hover event, the cards take an expanding effect by changing its width to 30vw. The card title is given the styles of width as 100%, transition as 1s, and padding as 20px 25px, which changes to color as #333, and background as rgba(255, 255, 255, 0.8), in a hover event. Source: https://www.tolmatol.com/expand-image-on-hover-flex-css-effect/

This is another example of an Our Services card layout, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of six columns. The background color of the form is set as #fff. The card title is given the styles of text-transform as uppercase to automatically convert the text to uppercase, font-weight as 700, and margin-bottom as 15px. The Read more button is given a font-size as 14px, whereas the content section is given the styles of opacity as 0, visibility as hidden to display only in a hover event, and transition as all .5s ease-out. In a hover event, the content takes the styles of opacity value as 1, and visibility value as visible. In a hover event, the overlay card gets placed over the image card with a linear gradient background color of linear-gradient(to right,rgba(62,214,115,.5),rgba(157,218,62,.5))!important. Source: https://www.tolmatol.com/gym-services/

This is another example of an Our Services layout, designed using HTML, CSS, and Bootstrap framework 4. The fonts are imported to the code with its URL. The services card is given the styles of position as relative, padding as 35px 15px, text-align as center, and border as 2px solid #efefee, whereas the inner icon box has the styles of position as relative, font-size as 60px, color as #009dea, line-height as1em, and margin-bottom as 20px. The title of the services card is given the styles of color as #222222, font-size as 18px, font-weight as 600, and margin-bottom as 15px. In a hover event, the title changes its color to #009dea. The content section of the card has the styles of font color as #888888, font-size as 14px, and line-height as 1.8em. In a hover event over the service card, and outer layer with the background color of rgba(0,0,0,0.80), and opacity of 1, and a transform value of perspective(400px) rotateX(0deg), gets displayed over the inner card. Source: https://www.tolmatol.com/our-services/

This is an example of an Our Services layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The font style is imported to the code with its URL. The layout consists of three columns. The font style for the web page is given as 'Poppins', sans-serif. The form is given a linear gradient background color of (#6A1B9A, #9C27B0 50%, #fff 50%, #fff). The display style for the services cards is given as flex. The service cards are given the styles of width as 280px, background as #fff, padding as 60px 40px 60px, and box-shadow as 0px 15px 45px rgba(0,0,0,.1). The card number has the styles of font-size as 4em, font-weight as 800, z-index as 1, opacity as 0.2, and transition s 0.5s, which takes the styles of opacity as 1, color as #fff, and transform as translateY(-50px), in a hover event. The image card takes the styles of transform as scaleY(1), transform-origin as bottom, and transition as transform 0.5s, in a hover event to turn the background of the card to #ff226d. Source: https://www.tolmatol.com/our-services-2/

This is an example of an image card layout depicting the item category list, designed using HTML, CSS, and Bootstrap framework 4. The images and Bootstrap styles are imported to the code with their URLs. The image is given the styles of width as 100%, and cursor as pointer to get the hand cursor effect in a hover event. The content section of the card is given the styles of position as absolute, width as 100%, text-align as center, transform as translateY(100%), background as #fffffff2, max-width as 80%, margin as 0% 10%, cursor as pointer, border-radius as 5px, padding as 15px 0px, and transition as all .5s. The subtitle of the card is given a text-transform style as uppercase to automatically convert the text to uppercase, whereas the title is given the styles of font-weight as 600, font-size as 22px, and line-height as 1.6. In a hover event, the content section takes the styles of border-radius as 50px, max-width as 90%, and margin as 0% 5% to form an oval shape. Source: https://www.tolmatol.com/bootstrap-snippets-category-list/

This is an example of a Blog layout with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The CSS and Bootstrap styles are imported to the code with their URLs. The background form is given the styles of height as 105px, width as 100%, and background-color as #ffffff. The inner box of the blog card is given the styles of padding as 0 40px 35px, background-color as #fafafa, and border-radius as 10px. The image box is given a background color of #9C27B0 to appear only in a hover event. The image is given a transition value of all 500ms ease. In a hover event, the image takes a transform effect of scale(1.1), and an opacity value of .5. The information box has the styles of width as 100%, background-color as #ffffff, transform as translateY(-50%), min-height as 80px, padding-top as 20px, text-align as center, border-radius as 5px, and box-shadow as 0 18px 28px rgba(11,11,77,.14). The blog card title is given the styles of font-size as 18px, line-height as 25px, color as #12114a, font-weight as 500, and margin-bottom as 18px. In a hover event, the card title takes the color of #9C27B0. Source: https://www.tolmatol.com/bootstrap-blog-example-using-bootstrap-4/