CODEWITHSUNDEEP
javascriptjqueryhtmlcssfilter
user2700923
user2700923

Reputation:

Unfiltered inside of filtered - Using two elements to create an unfiltered area within the filtered image

Live JSFiddle

http://jsfiddle.net/TXMCv/5/

Question

You'll see below very quickly what it is that I'm trying to do. I've positioned two elements with the same background image, filtering one, and having an unfiltered version on top of it. How can I solve the problem of these images being unaligned? I've tried offset. I've tried absolute positioning, but that stops the overflow-hidden.

Possible, Messy Solution

The only solution that I see is to try and use a different version of the inner image until it lines up. Which is fine, in a few hours I could surely get a version that aligns properly, but what if I want to change the image in the background? This needs a CSS fix!

Note

Only tested in Chrome

Image Example

enter image description here

CSS

@import url(http://fonts.googleapis.com/css?family=Telex);


.slider-and-logo-holder
{
width:100%;
height:465px;
font-family: 'Telex', sans-serif;
}

.header-slide-image
{
left:0px;
width:100%;
height:390px;
background-image:url('images/mys3_slider.jpg');
background-position:0px;
transition:background-position 5s;
padding-top:70px;
}

.logo-wrap
{
margin-left:auto;
margin-right:auto;
width:790px;;
height:425px;
}

.logo-left
{
float:left;
}

.logo-right
{
float:left;
-webkit-transform:rotateZ(90deg);
font-size:130px;
margin-left:-50px;
line-height:330px
}

.title-box
{
width:580px;
height:270px;
border-style:solid;
border-width:17px;
color:#4c4c4c;
margin-top:100px;
}

.title-left
{
font-size:120px;
width:190px;
line-height:190px;
margin-left:10px;
overflow:hidden;
color:#fbfbfb;
float:left;

}

.title-right
{
font-size:340px;
margin-top:-410px;
width:50%;
color:#664da6;
float:left;
}

.blur
{
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-ms-filter: sepia(100%);
-o-filter: sepia(100%);
filter: sepia(100%);
}

.clip
{
overflow:hidden;
}

.abso1
{
position:absolute;
z-index:-1;
}

Upvotes: 1

Views: 149

Answers (2)

Max
Max

Reputation: 1525

background-attachment: fixed; does what you are aiming for. The background-images are then no longer oriented on the elements but rather on the viewport.

I updated your fiddle: http://jsfiddle.net/TXMCv/9/

Upvotes: 2

Joel Worsham
Joel Worsham

Reputation: 1150

I believe the best method will be through the use of absolute positioning.

So take your logo-wrap and position it absolutely and then use left and right to fine-tune the location.

In this fiddle I've done just that (as well as setting position:relative to the "slider-and-logo-holder").

.logo-wrap {
    width:790px;
    height:425px;
    position:absolute;
    left:-17px;
    top:-113px;
}

Note that you will probably want to make a new "inside-image" because in order to line it up, I had to make the main logo go slightly offscreen, but this method at least gets you moving in the right direction.

http://jsfiddle.net/TXMCv/8/

Upvotes: 0

Related Questions