How to keep the blurred background, but not full size pic if scroll outside the main pic

It’s been awhile since I’ve been here as I’ve been working three part-time jobs. Now I’m down to one job… whew! So I’m back to refining my website that several of you help me with a few months ago.
http://www.moskovita-photography.com/

I like the way it’s setup when you scroll outside the main photo at the top where it’s blurry, it shows the full size photo. BUT, I find it confuses a lot of people that visit the site. I found that out as some friends & clients told me such as this one:

Jason Kravitz May 1 • 8:28pm

I can empathize with having an old site that could use a make-over. Your images are stunning. I feel like this site doesn’t fully do them justice. The UI control is not intuitive to me and a bit frustrating. Like it starts with Mountains and Lakes but as soon as I roll the mouse down it seems to change the whole gallery when I hover over another tab so that I’m not sure where I am. If I try to roll off that control to see the thumbnails, it just shows a large version of the image and then I have to roll back into the grid but may or may not accidentally switch the category again. I’d consider using a more familiar user pattern like clickable menus vs roll-over and maybe rethink the whole click to the large image that is under the UI. It’s kind of cool and different but also may cause people to leave your site if they can’t figure it out.


So what I want is the main photo at the top to stay the same size and the blurred part also to stay the same filling the screen without it becoming full size photo when I scroll off the photo to the side. I like the way that looks anyways. So how do I change that in my coding? It’s been a few months so I forgot where it was in coding. Since that former post was closed, I couldn’t ask the question there:
https://www.sitepoint.com/community/t/methods-for-displaying-gallery-images-with-titles/354087/90

Thanks!

Sorry you lost me there:)

So what I want is the main photo at the top to stay the same size

The same size as what? I assume you are talking about the image in the white lined box at the top. i don’t understand what you are asking for. The image fits the box as best it can without losing its aspect ratio. We discussed this in your original thread and you didn’t want to cover the whole area because it would crop your photo. I feel though you may be asking a different question altogether.

Or are you simply asking that you want the background image to remain blurred at all times and for the gallery not to disappear when you scroll to the side?

I agree with some of the comments by Jason which is why on the original demo I coded for you there were some instructions visible.

I also notice that you changed the body background to ‘contain’ which is going to leave white gaps at the side or top depending on aspect ratio.

The hover gallery effect is basically the same one that you originally had (which I believed was borrowed from Stu Nichols old site). Hover galleries are quite hard to use and a click version would be more accessible but once again would require quite a bit of updating to achieve.

It would also be a benefit if smaller thumbnail images were used and the large image loaded when necessary otherwise the page becomes quite sluggish. These were issues mentioned in the other thread.:slight_smile:

Let me know what needs changing and I will try to help. :wink:

1 Like

If that’s what you meant then just remove this code:

 @media (min-width:1250px) and (any-hover: hover) {
	.bodybg:hover + .wrap{opacity:0;}

	.bodybg:hover:after {
		filter: blur(0px);
   	background-size: contain;
	}
}

What I want is the main pic at the top and gallery to stay the same and not change to full size when I scroll off it. Like you see here:


I like the blurred background that surrounds the main photo at the top.

No matter what gallery photo I choose, I want it to look like this and not change to full size

I don’t want this anymore where the gallery disappears… I like it but it appears to confuse too many people that look at my site.

The code I mentioned to remove in post #3 will stop the gallery disappearing when you hover at the edges of the viewport. Remove that code and see if it was what you wanted.

If you are asking that the smaller photo fits the width and height of the bordered box fully then we talked at length about this in your other thread.:slight_smile:

It is physically impossible to stretch an image to fit without breaking its aspect ratio or without cropping one dimension or another. This is not a limitation of html but pure physics in the real world. You can’t stretch real images without stretching both height and width uniformly.

The ‘cover’ value makes the image cover the area but width or height will be cropped in order to make the image fill the box.

The ‘contain’ value on the other hand ensures that the whole image is visible in the box at all time which will result in a gap at either horizontal or vertical edges depending on aspect ratio.

The only other option would be for the box to be fluid also and adjust size with the image. This of course would cause the page to jump up and down and any hover navigation impossible.

If you look at the following image of yours you will see black gaps at the side of the bordered box.

The black gaps are caused by the aspect ratio of the image and the value contain in the css which leaves a gap at the edge.

If we change the value to cover as seen in this screenshot the image will fill the box (look at the devtools window to see the code has been changed to cover for .mast img)

That looks ok and would seem to be fine however if we do the same for a different image you end up with this:

The image is cropped and the most important part is missing.

It’s really a choice only you can make I’m afraid :slight_smile:

1 Like

The black gaps are caused by the aspect ratio of the image and the value contain in the css which leaves a gap at the edge.

And those gaps increase/decrease as you resize the image :slight_smile: . I see that happening on my music player all the time, as I resize the album photo cover.

Ah… once again you guys give me a lot to look at and to do.
I’m going to look this over later and play with some of the coding.
I don’t mind the way it is at all, I love it, but need it more simple for other people looking at it as most are probably not computer savvy anyway. Most like simple and if it’s not, they look elsewhere.

1 Like

Yep, that was what I was asking for… now to see what people think.
Myself I liked it the way it was, but I had too many complain about the scrolling, disappearing gallery etc. My best friend who is a superior photographer than me, was one of them who complained and I take great stock in what he said. He did say once he figured it out he liked it fine, BUT most other checking out the site might just leave instead of figuring it out.

Looks like there is nothing I can do about the black background around some photos.
I’m going back there to read what you said about it again. Some photos with the black borders was already there, but disappeared after scrolling to the left or right.
Oh well…

Once again… Thanks for you help.

2 Likes