{"id":185,"date":"2024-07-06T07:10:07","date_gmt":"2024-07-06T07:10:07","guid":{"rendered":"https:\/\/codebox.keyframetechsolution.com\/?p=185"},"modified":"2025-02-08T15:25:48","modified_gmt":"2025-02-08T15:25:48","slug":"vertical-card-hover-animation","status":"publish","type":"post","link":"https:\/\/codebox.keyframetechsolution.com\/vertical-card-hover-animation\/","title":{"rendered":"Vertical Card Hover Animation Effects Using HTML CSS Only"},"content":{"rendered":"<p>In this video, I will show you how to create vertical card hover animation effect using HTML and CSS code. The effect will involve using CSS hover properties to change the appearance of a card element when the user hovers over it. This can include changes to the card&#8217;s background color, text color, or the addition of an overlay. I will also demonstrate how to use CSS transitions to smoothly animate these changes.<\/p>\n<p>Watch the full video to learn about Vertical Card Hover Animation Effects.<\/p>\n<h4>Video:-<\/h4>\n<p><iframe title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/LntrqNpbV28?si=Ro7JcQNjCm_Wb3HT\" width=\"100%\" height=\"450\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p><strong><i class=\"fa fa-download\" style=\"color: #046bd2;\"><\/i> 1 people downloaded this<\/strong><\/p>\n<p><strong>Get It FREE Now<\/strong><\/p>\n<div class=\"download-code\">\n<a href=\"https:\/\/codebox.keyframetechsolution.com\/wp-content\/uploads\/2024\/06\/30-vertical-card.zip\">Download Source Code<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this video, I will show you how to create vertical card hover animation effect using HTML and CSS code. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":186,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[377,4],"tags":[114,52,54,267,266,268],"class_list":["post-185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-source-code","category-hover-effects","tag-card-hover-effects","tag-css","tag-html","tag-programming","tag-vertical-card-hover-animation","tag-vertical-card-hover-effects"],"acf":[],"_links":{"self":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":10,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":1339,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/posts\/185\/revisions\/1339"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media\/186"}],"wp:attachment":[{"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebox.keyframetechsolution.com\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}