{"id":24199,"date":"2025-05-27T15:19:06","date_gmt":"2025-05-27T22:19:06","guid":{"rendered":"https:\/\/wou.edu\/marcom\/?page_id=24199"},"modified":"2025-08-11T11:50:00","modified_gmt":"2025-08-11T18:50:00","slug":"photo-hover-over-layout","status":"publish","type":"page","link":"https:\/\/wou.edu\/marcom\/wordpress-support\/photo-hover-over-layout\/","title":{"rendered":"Photo Hover Over Layout"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;#db0a29 0%|#a3080f 100%&#8221; background_enable_pattern_style=&#8221;on&#8221; background_pattern_style=&#8221;diagonal-stripes&#8221; background_pattern_size=&#8221;custom&#8221; background_pattern_width=&#8221;2000px&#8221; background_pattern_height=&#8221;1000px&#8221; background_pattern_horizontal_offset=&#8221;0%&#8221; background_pattern_vertical_offset=&#8221;0%&#8221; custom_padding=&#8221;25px||25px||true|&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;|auto|-12px|auto||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;Montserrat|700|||||||&#8221; background_layout=&#8221;dark&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1 style=\"text-align: center;\">Photo hover over layout<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;0px|||||&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||-4px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 1<\/span><\/strong><\/span> Click on the Text Module settings icon.<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/1-1.jpg&#8221; alt=&#8221;screenshot&#8221; title_text=&#8221;1 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||-4px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 2<\/span><\/strong><\/span> Click on the Arrow icon and change out the text to be what you want. Then copy that and click on the Tablet icon and paste it in there and do the same for the Mobile icon.\u00a0<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/6-1.jpg&#8221; alt=&#8221;screenshot&#8221; title_text=&#8221;6 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||3px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 3<\/span><\/strong><\/span> If you would like to add a link so when someone clicks on the area, click the Link to expand that section and enter the link it in the Module Link URL box.\u00a0<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/2-1.jpg&#8221; alt=&#8221;Screenshot for background image&#8221; title_text=&#8221;2 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||-4px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 4<\/span><\/strong><\/span> Click on Background section to expand it down. Hover over the smaller Background word and select the Device icon and the Arrow icon so that they both turn blue. Then click on the Image icon.<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/3-1.jpg&#8221; alt=&#8221;screenshot&#8221; title_text=&#8221;3 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||-4px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 5<\/span><\/strong><\/span> Click on the photo and then change it out to the one you would like to use.<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/4-1.jpg&#8221; alt=&#8221;screenshot&#8221; title_text=&#8221;4 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][et_pb_text _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;||-4px|||&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><span style=\"font-size: large\"><span style=\"color: #969696\"><strong><span style=\"font-size: xx-large\">Step 6<\/span><\/strong><\/span> Click on the arrow icon and then click on the photo and change out the hover image that you would like to use. Then click the green check box.<\/span><\/p>\n<p><span style=\"font-size: large\"><\/span><\/p>\n<p>[\/et_pb_text][et_pb_image src=&#8221;https:\/\/cdn.wou.edu\/marcom\/files\/2025\/08\/5-1.jpg&#8221; alt=&#8221;screenshot&#8221; title_text=&#8221;5 (1)&#8221; _builder_version=&#8221;4.27.2&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Photo hover over layout Step 1 Click on the Text&#8230;<\/p>\n","protected":false},"author":1591,"featured_media":0,"parent":23847,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"splash-page.php","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"Photo Hover Over Layout - WordPress Support","_seopress_titles_desc":"","_seopress_robots_index":"","_lmt_disableupdate":"","_lmt_disable":"","_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-24199","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/24199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/users\/1591"}],"replies":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/comments?post=24199"}],"version-history":[{"count":6,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/24199\/revisions"}],"predecessor-version":[{"id":25039,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/24199\/revisions\/25039"}],"up":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/23847"}],"wp:attachment":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/media?parent=24199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}