[vc_row type=”full_width_content” bg_position=”left top” bg_repeat=”no-repeat” bg_color=”#c6c6c6″ scene_position=”center” text_color=”dark” text_align=”left”][vc_column width=”1\/1″][divider line_type=”No Line” custom_height=”20″][vc_row_inner class=”padding_rt”][vc_column_inner width=”2\/3″ animation=”none” column_padding=”padding-2-percent”][vc_column_text]<\/p>\n

MouseOver block with page peel — Entirely CSS<\/h3>\n

My latest bit of code is for a mouse-over box used as a link. “block_link”. I wanted to build an effect using purely CSS to deliver a box shadow and image opacity effect and I believe it turned out pretty nice. I also like the benefit that it makes handheld devices stagger a second while scrolling. It helps signal the link.<\/p>\n

The examples can be seen on the Salvatori’s homepage:\u00a0https:\/\/salvatorisitalian.com\/<\/a>.<\/p>\n

Please feel free to play with the code and see what you come up with. Note: I had to change the background color of the page to show the transparency effect. It was designed to highlight on a colored or textured background.<\/p>\n

[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/3″ animation=”none” column_padding=”padding-2-percent” el_class=”block_link”][vc_raw_html]JTNDYSUyMGhyZWYlM0QlMjJodHRwJTNBJTJGJTJGZGVzaWduc2VydmljZXNmb3J0d2F5bmUuY29tJTJGJTIyJTNF[\/vc_raw_html][image_with_animation image_url=”310″ alignment=”center” animation=”Fade In” img_link_target=”_self” el_class=”block_link”][vc_column_text]<\/p>\n

Entire block acts as link<\/p>\n

[\/vc_column_text][vc_raw_html]JTNDJTJGYSUzRQ==[\/vc_raw_html][\/vc_column_inner][\/vc_row_inner][divider line_type=”No Line” custom_height=”20″][\/vc_column][\/vc_row][vc_row][vc_column width=”1\/1″][vc_raw_html]JTNDZGl2JTIwY2xhc3MlM0QlMjJ4bXBfY29udGFpbiUyMiUzRSUwQSUzQ3htcCUzRSUwQS5ibG9ja19saW5rJTIwJTdCJTBBJTIwJTIwcG9zaXRpb24lM0ElMjByZWxhdGl2ZSUzQiUwQSUyMCUyMGNvbG9yJTNBJTIwJTIzMDAwJTNCJTBBJTIwJTIwYmFja2dyb3VuZC1pbWFnZSUzQXVybCUyOGh0dHAlM0ElMkYlMkZkZXNpZ25zZXJ2aWNlc2ZvcnR3YXluZS5jb20lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTQlMkYwOSUyRmZmZmZmZjYzLnBuZyUyOSUzQiUwQSUyRiUyQSUyMGZmZmZmZjMzJTIwZGVub3RlcyUyMGElMjB3aGl0ZSUyMGltYWdlJTIwYXQlMjA2MyUyNSUyMG9wYWNpdHklMjAlMkElMkYlMEElMkYlMkElMjBUaGUlMjBpbWFnZSUyMGlzJTIwb25seSUyMGElMjBmZXclMjBwaXhlbHMlMjBpbiUyMHNpemUlMkMlMjBzbyUyMGl0JTIwaXMlMjByZXBlYXRlZCUyMCUyQSUyRiUwQSUyMCUyMGJhY2tncm91bmQtcmVwZWF0JTNBcmVwZWF0JTNCJTBBJTdEJTBBLmJsb2NrX2xpbmslM0Fob3ZlciU3QiUwQSUyMCUyMGJhY2tncm91bmQtaW1hZ2UlM0F1cmwlMjhodHRwJTNBJTJGJTJGZGVzaWduc2VydmljZXNmb3J0d2F5bmUuY29tJTJGd3AtY29udGVudCUyRnVwbG9hZHMlMkYyMDE0JTJGMDklMkZmZmZmZmYzMy5wbmclMjklM0IlMEElMkYlMkElMjBmZmZmZmY2MyUyMGRlbm90ZXMlMjBhJTIwd2hpdGUlMjBpbWFnZSUyMGF0JTIwMzMlMjUlMjBvcGFjaXR5JTIwJTJBJTJGJTBBJTIwJTIwYmFja2dyb3VuZC1yZXBlYXQlM0FyZXBlYXQlM0IlMEElN0QlMEElMEEuYmxvY2tfbGluayUzQWJlZm9yZSUyMCU3QiUwQSUyMCUyMGNvbnRlbnQlM0ElMjAlMjIlMjIlM0IlMEElMjAlMjBwb3NpdGlvbiUzQSUyMGFic29sdXRlJTNCJTBBJTIwJTIwdG9wJTNBJTIwMCUzQiUwQSUyMCUyMHJpZ2h0JTNBJTIwMCUzQiUwQSUyMCUyMGJvcmRlci13aWR0aCUzQSUyMDAlMjAxNnB4JTIwMTZweCUyMDAlM0IlMEElMjAlMjBib3JkZXItc3R5bGUlM0ElMjBzb2xpZCUzQiUwQSUyMCUyMGJvcmRlci1jb2xvciUzQSUyMCUyM2ZmZmZmZiUyMCUyMzZkNmE4OCUzQiUwQSU3RCUwQSUwQS5ibG9ja19saW5rJTNBaG92ZXIlM0FiZWZvcmUlMjAlN0IlMEElMjAlMjBjb250ZW50JTNBJTIwJTIyJTIyJTNCJTBBJTIwJTIwcG9zaXRpb24lM0ElMjBhYnNvbHV0ZSUzQiUwQSUyMCUyMHRvcCUzQSUyMDAlM0IlMEElMjAlMjByaWdodCUzQSUyMDAlM0IlMEElMjAlMjBib3JkZXItd2lkdGglM0ElMjAwJTIwMzJweCUyMDMycHglMjAwJTNCJTBBJTIwJTIwYm9yZGVyLXN0eWxlJTNBJTIwc29saWQlM0IlMEElMjAlMjBib3JkZXItY29sb3IlM0ElMjAlMjNmZmYlMjAlMjM2ZDZhODglM0IlMEElN0QlMEElM0MlMkZkaXYlM0UlMEElM0MlMkZ4bXAlM0UlMEElM0MlMkZkaXYlM0U=[\/vc_raw_html][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"

[vc_row type=”full_width_content” bg_position=”left top” bg_repeat=”no-repeat” bg_color=”#c6c6c6″ scene_position=”center” text_color=”dark” text_align=”left”][vc_column width=”1\/1″][divider line_type=”No Line” custom_height=”20″][vc_row_inner class=”padding_rt”][vc_column_inner width=”2\/3″ animation=”none” column_padding=”padding-2-percent”][vc_column_text] MouseOver block with page peel — Entirely CSS My latest bit of code is for a mouse-over box used as a link. “block_link”. I wanted to build an effect using purely CSS to deliver a box shadow and […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[],"_links":{"self":[{"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":28,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":412,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/posts\/376\/revisions\/412"}],"wp:attachment":[{"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designservicesfortwayne.com\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}