{"id":1962,"date":"2022-09-02T17:02:07","date_gmt":"2022-09-02T17:02:07","guid":{"rendered":"https:\/\/beproblemsolver.com\/?p=1962"},"modified":"2022-09-02T17:04:35","modified_gmt":"2022-09-02T17:04:35","slug":"image-scroll-on-hover-with-css","status":"publish","type":"post","link":"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/","title":{"rendered":"Image scroll on hover &#8211; 2 Methods with CSS"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/#Introduction\" >Introduction<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/#First_Coding_the_HTML_Structure\" >First: Coding the HTML Structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/#Magic_of_Transform_CSS_Property\" >Magic of Transform CSS Property<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/#Background_Image_Scroll_on_Hover\" >Background Image Scroll on Hover<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/beproblemsolver.com\/image-scroll-on-hover-with-css\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Introduction\"><\/span>Introduction<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hey guys &amp; gals!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Are you looking to add flair to your website with a CSS image scroll on hover? Then be ready.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In today&#8217;s post, I will explain how you can make your images shine!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">No worries, this tutorial will be a short one. You will be able to learn how to do <strong>image scroll on hover<\/strong> and even <strong>background-image scroll on hover <\/strong>with only<strong> CSS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">See below on how does our solution look like in codepen:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNdvrGZ\" src=\"\/\/codepen.io\/anon\/embed\/oNdvrGZ?height=450&amp;theme-id=1&amp;slug-hash=oNdvrGZ&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNdvrGZ\" title=\"CodePen Embed oNdvrGZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So after seeing what we will do in this code session of Problem Solver. Let&#8217;s bring out our <a href=\"https:\/\/beproblemsolver.com\/why-vs-code-editor-in-2022\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/why-vs-code-editor-in-2022\/\">favorite code editor<\/a> and start the code battle!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"First_Coding_the_HTML_Structure\"><\/span>First: Coding the HTML Structure<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Scroll image on hover works on simple principles:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The image we use must be a long one. Meaning its <strong>height must be longer than its width<\/strong>. Like in this example, I used a placeholder image from <a href=\"https:\/\/unsplash.com\/\" data-type=\"URL\" data-id=\"https:\/\/unsplash.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Unsplash<\/a> with a long length.<\/li><li>Next, we wrapped our image in a frame. In this example, I named it <strong>&#8220;your_frame&#8221;<\/strong>. Your frame must have a fixed height too.<\/li><li>I used Google Fonts purely for aesthetics, nothing else.<\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>Image Scroll on hover(Css Solution)&lt;\/title>\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins&amp;display=swap\" rel=\"stylesheet\">\n  &lt;link rel=\"stylesheet\" href=\"style.css\">\n&lt;\/head>\n\n&lt;body>\n  &lt;div class=\"container\">\n    \n    &lt;h1>Image Scroll on hover(Css Solution)&lt;\/h1>\n\n    &lt;div class=\"your_frame\">\n      &lt;img src=\"https:\/\/source.unsplash.com\/random\/300\u00d71500\" alt=\"img\">\n    &lt;\/div>\n\n  &lt;\/div>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Now you know the basic HTML point you need to remember for image scroll on hover. We are going to into the CSS part of this project:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Magic_of_Transform_CSS_Property\"><\/span>Magic of Transform CSS Property<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For CSS let me explain what we did:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>In our fixed frame class &#8220;<strong>your_frame<\/strong>&#8220;, we set CSS to &#8220;<strong>overflow: hidden<\/strong>&#8220;. This can hide anything that might spill over our frame.<\/li><li>&#8220;<strong>object-fit: cover<\/strong>&#8221; is a brand new property in CSS3. You can read about it in detail on <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/object-fit\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/object-fit\" target=\"_blank\" rel=\"noreferrer noopener\">MDN<\/a>(Mozilla Docs). But what it does is: <strong>make our images fit into the container<\/strong> itself. This property is way better than setting your images to cover.<\/li><li>Lastly, the CSS code that makes our code animate is:<br>&#8220;transform: translateY(0)&#8221;<br>&#8220;transform: translateY(calc(-100% + 400px))&#8221;<\/li><li>We used the &#8220;<strong>+ 400px<\/strong>&#8221; according to our frame height. Do remember that!<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Our Image <strong>moves<\/strong> or <strong>animates<\/strong> because &#8212; the Transform CSS property trigger the movement of the image across the Y-axis by the translateY action. Similarly, you can do horizontal scrolling by changing &#8220;<strong>translateY<\/strong>&#8221; to &#8220;<strong>translateX<\/strong>&#8220;.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"monokai\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: 'Poppins', sans-serif;\n  font-size: 16px;\n}\n\n.container {\n  margin: 5px auto;\n}\n\n.your_frame {\n  width: 500px;\n  height: 400px;\n  overflow: hidden;\n  cursor: pointer;\n}\n\n.your_frame img {\n  object-fit: cover;\n  width: 100%;\n\n  transform: translateY(0);\n  transition: 5s ease-out;\n}\n\n.your_frame:hover img {\n  object-fit: cover;\n  transform: translateY(calc(-100% + 400px));\n  transition: 5s ease-out;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Feel free to download this code from my GitHub link below:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/github.com\/PawanKumar-Dev\/image-scroll-on-hover.git\" target=\"_blank\" rel=\"noreferrer noopener\">Code Download<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Background_Image_Scroll_on_Hover\"><\/span>Background Image Scroll on Hover<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Similar to the above example of image scroll on hover, we can do the scroll image on CSS with background images too.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, using background images has its drawback like you cannot simply lazy load them with the &#8220;lazyload&#8221; attribute. So keep that in mind in case your project needs lazy loading.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYjBoev\" src=\"\/\/codepen.io\/anon\/embed\/vYjBoev?height=450&amp;theme-id=1&amp;slug-hash=vYjBoev&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYjBoev\" title=\"CodePen Embed vYjBoev\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike our previous example, background-image animation works because of the CSS property: &#8220;<strong>background-position<\/strong>&#8220;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What we are doing is changing the &#8220;<strong>background-position<\/strong>&#8221; when we hover on the image frame. For the smoothing effect, we used the simple CSS transition.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/09\/Background-Image-Scroll-on-Hover-1024x486.gif\" alt=\"Scroll images on hover CSS can be amazing and interactive for website visitors.\" class=\"wp-image-2100\" srcset=\"https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/09\/Background-Image-Scroll-on-Hover-1024x486.gif 1024w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/09\/Background-Image-Scroll-on-Hover-300x143.gif 300w, https:\/\/beproblemsolver.com\/wp-content\/uploads\/2022\/09\/Background-Image-Scroll-on-Hover-768x365.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Scroll images on hover CSS can be amazing and interactive for website visitors.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Download code of Background Image Scroll on Hover below: <\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/github.com\/PawanKumar-Dev\/image-scroll-on-hover.git\" target=\"_blank\" rel=\"noreferrer noopener\">Code Download<\/a><\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I hope you enjoyed this article on image scroll on hover with CSS. I found this way of showing website template images cool to other clients. You can even add a lightbox on click of the image. Which will make your image pop out in front of your website visitors.\ud83e\udd17<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also check out my other post about <a href=\"https:\/\/beproblemsolver.com\/6-methods-to-use-page-scroll-animation\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/6-methods-to-use-page-scroll-animation\/\">6 cool ways to do page scroll animations<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you have any questions or concerns, please contact us anytime at <a href=\"https:\/\/beproblemsolver.com\/about\/\" data-type=\"URL\" data-id=\"https:\/\/beproblemsolver.com\/about\/\">Be Problem Solver<\/a>. Or feel free to comment. We will reply fast!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ta-da! guys and gals. Thank you for reading this far. I will try to bring more small snippets of code like this in the future. Happy Coding! \ud83d\ude01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to do an image scroll on hover with CSS. This CSS tutorial will walk you through the necessary steps to create this effect on your website.<\/p>\n","protected":false},"author":1,"featured_media":2026,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"googlesitekit_rrm_CAow6-e6DA:productID":"","footnotes":""},"categories":[14,18,17],"tags":[12,11,35],"class_list":["post-1962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","category-css","category-html","tag-css3","tag-html5","tag-web-development"],"_links":{"self":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts\/1962","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/comments?post=1962"}],"version-history":[{"count":0,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/posts\/1962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/media\/2026"}],"wp:attachment":[{"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/media?parent=1962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/categories?post=1962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beproblemsolver.com\/wp-json\/wp\/v2\/tags?post=1962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}