{"id":16471,"date":"2021-11-26T06:45:42","date_gmt":"2021-11-26T12:45:42","guid":{"rendered":"https:\/\/theadminbar.com\/?p=16471"},"modified":"2022-06-13T07:34:55","modified_gmt":"2022-06-13T12:34:55","slug":"scrolling-image-effect-with-generateblocks","status":"publish","type":"post","link":"https:\/\/theadminbar.com\/scrolling-image-effect-with-generateblocks\/","title":{"rendered":"Scrolling Image Effect with GenerateBlocks"},"content":{"rendered":"\n<p>The full-length screenshots of websites we\u2019ve created are great \u2014 but having a giant, skinny image on a page is a bit of a nightmare to design around.<\/p>\n\n\n\n<p>The scrolling image effect is a nice way to keep the image constrained to manageable size, while allowing people to see the full screenshot, from top to bottom, by allowing the image to scroll when you hover over it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/Screen-Recording-11-26-2021-at-6.25-AM.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/Screen-Recording-11-26-2021-at-6.25-AM.gif\" height=\"428\" width=\"1066\" class=\"wp-image-16473 sp-no-webp\" alt=\"screen recording 11 26 2021 at 6.25 am\" loading=\"lazy\" decoding=\"async\"  > <\/picture><\/figure>\n\n\n\n<p>I recently applied this effect to my new \u201csimplified\u201d portfolio page on my agency\u2019s website and have had a couple people in our community asking how it was done.<\/p>\n\n\n\n<p>Thankfully, it\u2019s quite easy, and requires just a small bit of completely customizable CSS (which I\u2019ll be sharing below).<\/p>\n\n\n\n<p>There\u2019s likely ways you can do this in your page builder of choice, but since I built with Generate Blocks, that\u2019s what I\u2019ll be using for this demonstration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-the-structure\">Step 1 &#8211; The Structure<\/h2>\n\n\n\n<p>I\u2019ll assume you want to do something similar to the example I provided above from my portfolio, so the first thing we need to do is create the structure for this layout.<\/p>\n\n\n\n<p>For that, we need to create a container, and inside it put a grid with 2 columns.<\/p>\n\n\n\n<p>The column on the left will hold our image, and the column on the right will hold our text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step1-a-1024x403.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step1-a-1024x403.png\" height=\"403\" width=\"1024\" class=\"wp-image-16474 sp-no-webp\" alt=\"step1 a\" loading=\"lazy\" decoding=\"async\"  > <\/picture><\/figure>\n\n\n\n<p>Select the container of your left column inside the grid, and under the \u201cBackgrounds\u201d settings insert the image URL from your source image (the image you want to scroll on hover), then use the following settings:<\/p>\n\n\n\n<ul><li>Size: full<\/li><li>Selector: Element<\/li><li>Image Opacity: 1<\/li><li>Size: cover<\/li><li>Position: top center<\/li><li>Repeat: no repeat<\/li><li>Attachment: scroll<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step-1-b.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step-1-b.png\" height=\"807\" width=\"276\" class=\"wp-image-16475 sp-no-webp\" alt=\"step 1 b\" loading=\"lazy\" decoding=\"async\"  > <\/picture><\/figure>\n\n\n\n<p>Finally, under the \u201cAdvanced\u201d tab, we need to assign a class to this container. In my example (and the CSS provided below) I used the class \u201cscroll-image\u201d.&nbsp; You\u2019re welcome to change that to whatever you\u2019d like, but make sure to change it in the CSS too!<\/p>\n\n\n\n<p><em><strong>Note: <\/strong>You\u2019ll want to go ahead and put some content in the right hand column. The height of your columns will be determined by how much content is in there, and at this point (assuming it\u2019s still blank) your scrollable image won\u2019t show up.\u00a0<\/em><\/p>\n\n\n\n<p><em>It should look something like this:<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><picture><source srcset=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step-1-c-1024x526.webp \"  type=\"image\/webp\"><img src=\"https:\/\/theadminbar.com\/wp-content\/uploads\/2022\/06\/step-1-c-1024x526.png\" height=\"526\" width=\"1024\" class=\"wp-image-16476 sp-no-webp\" alt=\"step 1 c\" loading=\"lazy\" decoding=\"async\"  > <\/picture><\/figure>\n\n\n\n<p>Save your page, and let\u2019s move on to the CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-the-css\">Step 2 &#8211; The CSS<\/h2>\n\n\n\n<p>Now, we have to add the CSS to make the scroll happen when you hover over the image.<\/p>\n\n\n\n<p>All you need to do is copy\/paste the CSS below into your website wherever you store additional CSS (this could be in your child theme\u2019s stylesheet, or simply in the customizer).&nbsp;<\/p>\n\n\n\n<p>Here\u2019s what you\u2019ll copy &amp; paste:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-white-background-color has-text-color has-background\"><code>.scroll-image {\nbackground-position: 0 0;\n-webkit-transition: background-position 3s ease-in-out;\n-moz-transition: background-position 3s ease-in-out;\n-ms-transition: background-position 3s ease-in-out;\n-o-transition: background-position 3s ease-in-out;\ntransition: background-position 3s ease-in-out;\n}\n\n.scroll-image:hover {\nbackground-position: 0 100%;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"let-s-talk-about-the-css\">Let\u2019s talk about the CSS<\/h3>\n\n\n\n<p>The CSS for this is pretty simple, but you may need to fine-tune it a bit. The speed in which the image scrolls on hover is determined by the transition time in the CSS (in the example above it\u2019s set to 3 seconds).<\/p>\n\n\n\n<p>For short images, this might be much too slow.&nbsp;<\/p>\n\n\n\n<p>For extremely long images, this might be way too fast.<\/p>\n\n\n\n<p>You\u2019ll just need to play with this number and adjust it to your preference.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The longer the image, the longer time you\u2019ll want your transition to be.<\/p>\n\n\n\n<p>Whatever duration you choose, you\u2019ll have to adjust in the CSS in all the different fallbacks for the transition duration (everywhere it says \u201c3s\u201d in the CSS I supplied to you).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"that-s-it\">That\u2019s it!<\/h2>\n\n\n\n<p>Everything should be working now!&nbsp; Keep in mind, this effect will only display on the front end of your site (not inside the editor).&nbsp;<\/p>\n\n\n\n<p>Of course, you don\u2019t have to use this exact same implementation \u2014 this same idea could be used in a variety of applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The full-length screenshots of websites we\u2019ve created are great \u2014 but having a giant, skinny image on a page is a bit of a nightmare to design around. The scrolling image effect &#8230; <a title=\"Scrolling Image Effect with GenerateBlocks\" class=\"read-more\" href=\"https:\/\/theadminbar.com\/scrolling-image-effect-with-generateblocks\/\" aria-label=\"Read more about Scrolling Image Effect with GenerateBlocks\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":16473,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_piecal_is_recurring":false,"_piecal_recurring_interval":1,"_piecal_recurring_frequency":"","_piecal_recurring_exact_position":false,"_piecal_recurring_end":"","_piecal_color":"","_piecal_text_color":"","_piecal_global_color_master":false,"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","footnotes":""},"categories":[31],"tags":[],"banner":[],"acf":[],"_links":{"self":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/16471"}],"collection":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/comments?post=16471"}],"version-history":[{"count":0,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/posts\/16471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media\/16473"}],"wp:attachment":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media?parent=16471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/categories?post=16471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/tags?post=16471"},{"taxonomy":"banner","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/banner?post=16471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}