Drupal 7 open image in colorbox when a “button” on the image is clicked, otherwise go to content
In Drupal 7 you can achieve it by the following steps



Steps


Create a new VIEW and add the following fields
Background image : Add the image which you want to show as background image using imagestyle. Also add the link to the node using Link image to. And check Exclude from display. 


Colorbox image : Add the image which you want to show inside COLORBOX using imagestyle. Dont add the link to this image and check Exclude from display

  
Image icon : Add the image which is used to render on the top of the background image  using imagestyle. And check Exclude from display.This image we will use in COLORBOX TRIGGER field.  
Colorbox Trigger : Add this field and make Image icon field as the TRIGGER FIELD and Colorbox image as its CONTENT by use "Replacement patterns".


Custom text : Add Global: Custom text field and add the below html inside it and make sure you should replace [Background image] and [Colorbox Trigger field] using "Replacement patterns". It act like a container. 


&#60;div class="image-wrapper"&#62;
     &#60;div class="outer-image"&#62;[Background image]&#60;/div&#62;
     &#60;div class="inner-image"&#62;[Colorbox Trigger field]&#60;/div&#62;
&#60;/div&#62;




OUTPUT







Note : Arrange the image icon above the background image using CSS