Close

Portfolio Image Card Layout

This is an example of a portfolio image card layout, designed using HTML, CSS, and Bootstrap framework 4. The images and Bootstrap styles are imported to the code with their URLs. Media quarries are used to increase the responsiveness of the form. The background form is given the styles of background-color as RGB(255, 255, 255), color as RGB(27, 27, 27), display as flex, flex-direction as column, height as 100%, padding as 20px, position as absolute, transition as all 0.4s ease-in-out 0s, and width as 100%. The image card title has the styles of font-size as 16px, margin-bottom as 5px, and transition as all 0.4s ease-in-out, whereas the content is given the styles of color as #6b6b6b, transition as all 0.4s ease-in-out, and font-size as 13px. In a hover event, the portfolio card takes a filter with a background color of rgba(17, 214, 240, 0.65), over its image card and turns the styles of the title and the content section to color as #ffffff, font-size as 20px, and color as #fff, font-size as 16px, respectively. Source: https://www.tolmatol.com/portfolio-using-html-css/

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

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

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.