Layered Card Hover Effect Using HTML and CSS

Hello Everyone, In this blog, we will learn how to create Layered Card Hover Effect using HTML and CSS only.

In this Example, we are using bootstrap for responsive designs so that it looks good in all devices.

CSS Cards are used as templates or inspiration for profile cards, display cards, image cards, in web interfaces and even CV/Resumes. These cards feature a variety of CSS effects like hovers, shadows, transitions, sliding, etc.

A sleek and clean CSS Layered Card hover effect, really nice to use in your content cards.

First of all, create an HTML File and paste the below code.

HTML Code:

[pastacode manual=”%3C!DOCTYPE%20html%3E%20%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%20%20%20%3Chead%3E%0D%0A%20%20%20%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%20%20%20%20%20%20%3Ctitle%3ELayered%20Hover%20Card%20Effect%3C%2Ftitle%3E%0D%0A%20%20%20%20%20%20%3Clink%20href%3D%22css%2Fbootstrap.css%22%20rel%3D%22stylesheet%22%20%2F%3E%0D%0A%20%20%20%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%20%20%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0D%0A%20%20%20%20%20%20%3Cmeta%20http-equiv%3D%22X-UA-Compatible%22%20content%3D%22ie%3Dedge%22%3E%0D%0A%20%20%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22css%2Fstyle.css%22%3E%0D%0A%20%20%20%3C%2Fhead%3E%0D%0A%20%20%20%3Cbody%3E%0D%0A%20%20%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22row%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22col-md-3%20col-xs-6%22%20style%3D%22margin-bottom%3A%2015px%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_card%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_imgBx%22%3E%20%3Cimg%20src%3D%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1532123675048-773bd75df1b4%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D500%26q%3D60%22%20alt%3D%22images%22%3E%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_details%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3EHeading%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22col-md-3%20col-xs-6%22%20style%3D%22margin-bottom%3A%2015px%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_card%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_imgBx%22%3E%20%3Cimg%20src%3D%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1549417229-aa67d3263c09%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D500%26q%3D60%22%20alt%3D%22images%22%3E%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_details%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3EHeading%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22col-md-3%20col-xs-6%22%20style%3D%22margin-bottom%3A%2015px%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_card%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_imgBx%22%3E%20%3Cimg%20src%3D%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1548094878-84ced0f6896d%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D500%26q%3D60%22%20alt%3D%22images%22%3E%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_details%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3EHeading%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22col-md-3%20col-xs-6%22%20style%3D%22margin-bottom%3A%2015px%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_card%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_imgBx%22%3E%20%3Cimg%20src%3D%22https%3A%2F%2Fimages.unsplash.com%2Fphoto-1548094878-84ced0f6896d%3Fixlib%3Drb-1.2.1%26ixid%3DeyJhcHBfaWQiOjEyMDd9%26auto%3Dformat%26fit%3Dcrop%26w%3D500%26q%3D60%22%20alt%3D%22images%22%3E%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22city_details%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%3EHeading%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”php”/]

[pastacode manual=”” provider=”manual” lang=”default”/]
In the above HTML code, we have created a container class inside the container class we created a row and inside a row, we have created 4 grid of size 3.

Now create a CSS file and paste the below code.

CSS Code:

[pastacode manual=”body%20%7B%0D%0A%09margin%3A%200%3B%0D%0A%09padding%3A%200%3B%0D%0A%09background%3A%20%23212121%3B%0D%0A%09font-family%3A%20sans-serif%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20%7B%0D%0A%09position%3A%20relative%3B%0D%0A%09width%3A%20auto%3B%0D%0A%09height%3A%20300px%3B%0D%0A%09background%3A%20%23fff%3B%0D%0A%09margin%3A%2050%25%20auto%3B%0D%0A%09border-radius%3A%204px%3B%0D%0A%09box-shadow%3A%200%202px%2010px%20rgba(0%2C%200%2C%200%2C%20.2)%3B%0D%0A%7D%0D%0A%0D%0A%40media(max-width%3A%20480px)%20%7B%0D%0A%09.city_card%20%7B%0D%0A%09%09position%3A%20relative%3B%0D%0A%09%09width%3A%20auto%3B%0D%0A%09%09height%3A%20180px%3B%0D%0A%09%09background%3A%20%23fff%3B%0D%0A%09%09margin%3A%200%20auto%3B%0D%0A%09%09border-radius%3A%204px%3B%0D%0A%09%09box-shadow%3A%200%202px%2010px%20rgba(0%2C%200%2C%200%2C%20.2)%3B%0D%0A%09%7D%0D%0A%7D%0D%0A%0D%0A.city_card%3Abefore%2C%0D%0A.city_card%3Aafter%20%7B%0D%0A%09content%3A%20%22%22%3B%0D%0A%09position%3A%20absolute%3B%0D%0A%09top%3A%200%3B%0D%0A%09left%3A%200%3B%0D%0A%09width%3A%20100%25%3B%0D%0A%09height%3A%20100%25%3B%0D%0A%09border-radius%3A%204px%3B%0D%0A%09background%3A%20%23fff%3B%0D%0A%09transition%3A%200.5s%3B%0D%0A%09z-index%3A%20-1%3B%0D%0A%7D%0D%0A%0D%0A.city_card%3Ahover%3Abefore%20%7B%0D%0A%09transform%3A%20rotate(20deg)%3B%0D%0A%09box-shadow%3A%200%202px%2020px%20rgba(0%2C%200%2C%200%2C%20.2)%3B%0D%0A%7D%0D%0A%0D%0A.city_card%3Ahover%3Aafter%20%7B%0D%0A%09transform%3A%20rotate(10deg)%3B%0D%0A%09box-shadow%3A%200%202px%2020px%20rgba(0%2C%200%2C%200%2C%20.2)%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20.city_imgBx%20%7B%0D%0A%09position%3A%20absolute%3B%0D%0A%09top%3A%205px%3B%0D%0A%09left%3A%205px%3B%0D%0A%09bottom%3A%205px%3B%0D%0A%09right%3A%205px%3B%0D%0A%09background%3A%20%23222%3B%0D%0A%09transition%3A%200.5s%3B%0D%0A%09z-index%3A%201%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20.city_imgBx%20%7B%0D%0A%09bottom%3A%2050px%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20.city_imgBx%20img%20%7B%0D%0A%09position%3A%20absolute%3B%0D%0A%09top%3A%200%3B%0D%0A%09left%3A%200%3B%0D%0A%09width%3A%20100%25%3B%0D%0A%09height%3A%20100%25%3B%0D%0A%09object-fit%3A%20cover%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20.city_details%20%7B%0D%0A%09position%3A%20absolute%3B%0D%0A%09left%3A%2010px%3B%0D%0A%09right%3A%2010px%3B%0D%0A%09bottom%3A%2010px%3B%0D%0A%09height%3A%2020px%3B%0D%0A%09text-align%3A%20center%3B%0D%0A%7D%0D%0A%0D%0A.city_card%20.city_details%20h2%20%7B%0D%0A%09margin%3A%200%3B%0D%0A%09padding%3A%200%3B%0D%0A%09font-weight%3A%20600%3B%0D%0A%09font-size%3A%2015px%3B%0D%0A%09color%3A%20%23777%3B%0D%0A%09text-transform%3A%20uppercase%3B%0D%0A%7D” provider=”manual” lang=”php”/]

[pastacode manual=”” provider=”manual” lang=”default”/]
Output : Layered Card Hover Effect Using HTML and CSS

 

 

Leave a Reply

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

%d