Recreating the Faded Backgrounds in the Backbone Branch

One thing that has been well recieved is using the selected image as a zoomed in and faded out background, for the sidebar. This was in the non-backbone version. Since the decision has been made to switch to the backbone branch as primary, it would be great to recreate this functionality in that branch.

I began messing around with it today, and had some issues with opacity transferring to the content of the sidebar. However, by putting the faded background in a :before pseudo element, we can fade it out without fading the sidebar’s content:

.media-sidebar:before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-position:center center;
    background-size:cover;
    opacity:0.2; 
}

screen

The next thing to do would be to tie in to backbone, find the event which fires whenever an image is selected, and use that to set the background-image. Additionally we need to decide what to do when multiple images are selected.

Advertisements