{"id":703,"date":"2025-07-18T13:10:00","date_gmt":"2025-07-18T13:10:00","guid":{"rendered":"https:\/\/blogarchive.utc.edu\/web-kb\/?p=703"},"modified":"2025-07-18T14:47:16","modified_gmt":"2025-07-18T14:47:16","slug":"hover-image","status":"publish","type":"post","link":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/","title":{"rendered":"Hover Image\u00a0"},"content":{"rendered":"\n

Adding a Hover Image to your Drupal Content Page.<\/h3>\n\n\n\n

Hover Images allows you to add multiple images to one block that also have naturally integrated links. Before starting these blocks, be sure that you have your image either saved to your editing device or have preloaded your image into the Drupal media library. <\/p>\n\n\n\n

\n\n\n\n

<\/p>

  1. Add Hover Image Block<\/strong>

    Starting from your content page, scroll up and select the \u201cLayout\u201d button. From there, select the \u201cAdd block\u201d option in the area where you want the block to be. Select the \u201cCreate Custom Block\u201d option at the top of our pop-up menu and select our \u201cUTC Hover Images\u201d.\u00a0<\/p> <\/li>

  2. Formatting your Hover Image<\/strong>

    a. \u201cImage Orientation\u201d<\/strong> For making your hover images appear either horizontally or vertically. It is critical that all your images are all vertical or all horizontal.<\/span> Strange cropping will occur if you create a mix.\u00a0\u00a0Note: In cases where there are 3 or 4 horizontal images, the screen size of the device or window may prohibit the copy from displaying due to space constraints.<\/em>\u00a0b. “Convert Color Images to Black and White<\/strong>“If you want to convert your color images to black and white. This is helpful if you want to add a blue or gold overlay (below) to create a duotone appearance.\u00a0\u00a0c. “Overlay Color for Duotone Effect<\/strong>“This option adds different tones to your images and create duotone effects, that comes before the hover.\u00a0\u00a0d. “Make Initial Titles Larger<\/strong>“This applies to the first title option (not the rollover-effects title) and is ideal for sections without columns.\u00a0\u00a0\u00a0\u00a0e. “Hide Initial Titles”<\/strong>This hides the initial title that shows on page load so that only the image shows. The title on the rollover effect still shows. Note: The user may not know to rollover the image for more information, except on mobile when this block turns into cards.<\/em>\u00a0<\/p> <\/li>

  3. Add Infomation<\/strong>

    Next, the hover block image information fields for you title, text, URL and link text for embedded links. \u00a0\u00a0You also have the option to add multiple hover images in one block, the maximum is four, but keep in mind that past 3 images put in the horizontal orientation, the display of these images may be affected or not display properly depending on the device you are using for editing. Four works great for vertical images in most instances. \u00a0\u00a0You will also want to note that because you can \u201chover\u201d on mobile devices, the hover images will turn into cards with a button for those.<\/em>\u00a0<\/p> <\/li>

  4. Save and Finish!<\/strong>

    Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0<\/p> <\/li><\/ol><\/div>\n\n\n\n

    We also recommend testing the links of your images after publishing by pressing the desired picture. As you can see, our hover image works perfectly. <\/p>\n","protected":false},"excerpt":{"rendered":"

    Adding a Hover Image to your Drupal Content Page. Hover Images allows you to add multiple images to one block that also have naturally integrated links. Before starting these blocks, be sure that you have your image either saved to your editing device or have preloaded your image into the Drupal media library.  We also… <\/p>\n

    Continue Reading <\/span><\/a><\/span><\/p>\n","protected":false},"author":2040,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[14],"class_list":{"0":"post-703","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-drupal","7":"tag-drupal-content-blocks","8":"entry"},"yoast_head":"\nHover Image\u00a0 - UTC Website Knowledge Base Archive<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hover Image\u00a0 - UTC Website Knowledge Base Archive\" \/>\n<meta property=\"og:description\" content=\"Adding a Hover Image to your Drupal Content Page. Hover Images allows you to add multiple images to one block that also have naturally integrated links. Before starting these blocks, be sure that you have your image either saved to your editing device or have preloaded your image into the Drupal media library.  We also… Continue Reading\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\" \/>\n<meta property=\"og:site_name\" content=\"UTC Website Knowledge Base Archive\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-18T13:10:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:47:16+00:00\" \/>\n<meta name=\"author\" content=\"Kailey Agoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kailey Agoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\",\"name\":\"Hover Image\u00a0 - UTC Website Knowledge Base Archive\",\"isPartOf\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\"},\"datePublished\":\"2025-07-18T13:10:00+00:00\",\"dateModified\":\"2025-07-18T14:47:16+00:00\",\"author\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hover Image\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#website\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/\",\"name\":\"UTC Website Knowledge Base Archive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3\",\"name\":\"Kailey Agoo\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/\"},{\"@type\":\"HowTo\",\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#howto-1\",\"name\":\"Hover Image\u00a0\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/\"},\"description\":\"\",\"step\":[{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908562591\",\"name\":\"Add Hover Image Block\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Starting from your content page, scroll up and select the \u201cLayout\u201d button. From there, select the \u201cAdd block\u201d option in the area where you want the block to be. Select the \u201cCreate Custom Block\u201d option at the top of our pop-up menu and select our \u201cUTC Hover Images\u201d.\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908584256\",\"name\":\"Formatting your Hover Image\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"<strong>a. \u201cImage Orientation\u201d<\/strong> <br\/>For making your hover images appear either horizontally or vertically. It is critical that all your images are all vertical or all horizontal. Strange cropping will occur if you create a mix.\u00a0\u00a0<br\/><br\/><em>Note: In cases where there are 3 or 4 horizontal images, the screen size of the device or window may prohibit the copy from displaying due to space constraints.<\/em><br\/>\u00a0<br\/><strong>b. \\\"Convert Color Images to Black and White<\/strong>\\\"<br\/>If you want to convert your color images to black and white. This is helpful if you want to add a blue or gold overlay (below) to create a duotone appearance.\u00a0<br\/>\u00a0<br\/><strong>c. \\\"Overlay Color for Duotone Effect<\/strong>\\\"<br\/>This option adds different tones to your images and create duotone effects, that comes before the hover.\u00a0<br\/>\u00a0<br\/><strong>d. \\\"Make Initial Titles Larger<\/strong>\\\"<br\/>This applies to the first title option (not the rollover-effects title) and is ideal for sections without columns.\u00a0<br\/>\u00a0<br\/>\u00a0\u00a0<br\/><strong>e. \\\"Hide Initial Titles\\\"<br\/><\/strong>This hides the initial title that shows on page load so that only the image shows. The title on the rollover effect still shows. <br\/><br\/><em>Note: The user may not know to rollover the image for more information, except on mobile when this block turns into cards.<\/em><br\/>\u00a0<br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908595035\",\"name\":\"Add Infomation\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Next, the hover block image information fields for you title, text, URL and link text for embedded links. \u00a0<br\/>\u00a0<br\/>You also have the option to add multiple hover images in one block, the maximum is four, but keep in mind that past 3 images put in the horizontal orientation, the display of these images may be affected or not display properly depending on the device you are using for editing. Four works great for vertical images in most instances. \u00a0<br\/>\u00a0<br\/><em>You will also want to note that because you can \u201chover\u201d on mobile devices, the hover images will turn into cards with a button for those.<\/em>\u00a0<br\/><br\/>\"}]},{\"@type\":\"HowToStep\",\"url\":\"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908744058\",\"name\":\"Save and Finish!\",\"itemListElement\":[{\"@type\":\"HowToDirection\",\"text\":\"Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0<br\/><br\/>\"}]}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hover Image\u00a0 - UTC Website Knowledge Base Archive","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/","og_locale":"en_US","og_type":"article","og_title":"Hover Image\u00a0 - UTC Website Knowledge Base Archive","og_description":"Adding a Hover Image to your Drupal Content Page. Hover Images allows you to add multiple images to one block that also have naturally integrated links. Before starting these blocks, be sure that you have your image either saved to your editing device or have preloaded your image into the Drupal media library.  We also… Continue Reading","og_url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/","og_site_name":"UTC Website Knowledge Base Archive","article_published_time":"2025-07-18T13:10:00+00:00","article_modified_time":"2025-07-18T14:47:16+00:00","author":"Kailey Agoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kailey Agoo","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/","name":"Hover Image\u00a0 - UTC Website Knowledge Base Archive","isPartOf":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website"},"datePublished":"2025-07-18T13:10:00+00:00","dateModified":"2025-07-18T14:47:16+00:00","author":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3"},"breadcrumb":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogarchive.utc.edu\/web-kb\/"},{"@type":"ListItem","position":2,"name":"Hover Image\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#website","url":"https:\/\/blogarchive.utc.edu\/web-kb\/","name":"UTC Website Knowledge Base Archive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogarchive.utc.edu\/web-kb\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/#\/schema\/person\/5559f9b11c05b19e967542085dbd38a3","name":"Kailey Agoo","url":"https:\/\/blogarchive.utc.edu\/web-kb\/author\/jzc491\/"},{"@type":"HowTo","@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#howto-1","name":"Hover Image\u00a0","mainEntityOfPage":{"@id":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/"},"description":"","step":[{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908562591","name":"Add Hover Image Block","itemListElement":[{"@type":"HowToDirection","text":"Starting from your content page, scroll up and select the \u201cLayout\u201d button. From there, select the \u201cAdd block\u201d option in the area where you want the block to be. Select the \u201cCreate Custom Block\u201d option at the top of our pop-up menu and select our \u201cUTC Hover Images\u201d.\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908584256","name":"Formatting your Hover Image","itemListElement":[{"@type":"HowToDirection","text":"<strong>a. \u201cImage Orientation\u201d<\/strong> <br\/>For making your hover images appear either horizontally or vertically. It is critical that all your images are all vertical or all horizontal. Strange cropping will occur if you create a mix.\u00a0\u00a0<br\/><br\/><em>Note: In cases where there are 3 or 4 horizontal images, the screen size of the device or window may prohibit the copy from displaying due to space constraints.<\/em><br\/>\u00a0<br\/><strong>b. \"Convert Color Images to Black and White<\/strong>\"<br\/>If you want to convert your color images to black and white. This is helpful if you want to add a blue or gold overlay (below) to create a duotone appearance.\u00a0<br\/>\u00a0<br\/><strong>c. \"Overlay Color for Duotone Effect<\/strong>\"<br\/>This option adds different tones to your images and create duotone effects, that comes before the hover.\u00a0<br\/>\u00a0<br\/><strong>d. \"Make Initial Titles Larger<\/strong>\"<br\/>This applies to the first title option (not the rollover-effects title) and is ideal for sections without columns.\u00a0<br\/>\u00a0<br\/>\u00a0\u00a0<br\/><strong>e. \"Hide Initial Titles\"<br\/><\/strong>This hides the initial title that shows on page load so that only the image shows. The title on the rollover effect still shows. <br\/><br\/><em>Note: The user may not know to rollover the image for more information, except on mobile when this block turns into cards.<\/em><br\/>\u00a0<br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908595035","name":"Add Infomation","itemListElement":[{"@type":"HowToDirection","text":"Next, the hover block image information fields for you title, text, URL and link text for embedded links. \u00a0<br\/>\u00a0<br\/>You also have the option to add multiple hover images in one block, the maximum is four, but keep in mind that past 3 images put in the horizontal orientation, the display of these images may be affected or not display properly depending on the device you are using for editing. Four works great for vertical images in most instances. \u00a0<br\/>\u00a0<br\/><em>You will also want to note that because you can \u201chover\u201d on mobile devices, the hover images will turn into cards with a button for those.<\/em>\u00a0<br\/><br\/>"}]},{"@type":"HowToStep","url":"https:\/\/blogarchive.utc.edu\/web-kb\/2025\/07\/18\/hover-image\/#how-to-step-1751908744058","name":"Save and Finish!","itemListElement":[{"@type":"HowToDirection","text":"Select \u201cadd Block\u201d at the bottom of your Configure menu and you are done!\u00a0<br\/><br\/>"}]}],"inLanguage":"en-US"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/users\/2040"}],"replies":[{"embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/comments?post=703"}],"version-history":[{"count":6,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":944,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/posts\/703\/revisions\/944"}],"wp:attachment":[{"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/categories?post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogarchive.utc.edu\/web-kb\/wp-json\/wp\/v2\/tags?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}