simona6

We have a selection of tabs from a default Woocommerce website. The owner wants a button in the Short Description, than when clicked, takes the user down to the row of tabs (Description etc)... but SELECTS the "Product Enquiry" tab (which does have it's own #id). I've seen a few :target CSS methods, but don't understand. Can you please help?

Cover won't work. The website uses a Zoom classed DIV to show the "full size" image when you hover over it. If we did Cover, it would simply show it to "fill the box". The idea is when you zoom over, as it is the original image, it's like running a Mag glass over it. But we want to set a Min Width/Height, so if the image is too small, it will stretch it (don't care about quality). Possible?

We have website where hovering over the Product photo reveals the full size image, so it kind of "zooms". Trouble is, many old photos are smaller than the container. Is there a way in CSS to set the minimum size to say 600x600px... even if it stretches it... but when you get an image that is BIG... is still shows the full size?

Daaa PLANK! It's transition: filter, not transition: brightness. Thanks all. Works a treat.

Wow that is daft - but works. .home-banner .porto-ibanner img {transition: brightness 0.2s;} .home-banner .porto-ibanner:hover img { filter: brightness(50%); } Can you tell me if this is the right transition code, as at the moment, when you hover over it, it goes dark, but no transition.

I have assigned it with no transition for now... and alas it is not doing anything.

It's a development website, but yes am happy to share. https://dev.knoleacademy.org/ They asked if when you hover over each of the three top tiles, if the image can darken.

Ok sorry. I don't really know then. The CSS I have given is what is applied to make the DIV move up. That's when you hover over the DIV. So I assumed your code would also be based on that Div, but affect the image. Which isn't doesn't.

Oh... so what should I be setting it to, as it isn't doing that.

No it's not working. Does it matter if we already have it doing something else too? .home-banner .porto-ibanner:hover .desc { max-height: 300px; } .home-banner .porto-ibanner:hover img { filter: brightness (50%); }

home-banner is the outer container, to ensure no other images using porto-ibanner are affected on the page.

We are using WP Bakery and there is an element where you can have a DIV called ibanner, with an image in it. When you hover, an overlay DIV moves up over the top of the image, part of the way. What I want to do is when you hover over the containing DIV, the IMG tag image inside, goes darker. I tried this, but it makes no difference. .home-banner .porto-ibanner:hover .home-banner .porto-ibanner img{ filter: brightness (50%); } <div id="interactive-banner-wrap-6bsz" class="porto-ibanner vc_custom_1727942938709 mb-2" style=""><img fetchpriority="high" decoding="async" alt="" width="5472" height="3648" class="porto-ibanner-img" src="images go here><div class="porto-ibanner-desc"><div class="porto-ibanner-content" style="color:#777777;"> <h6>Secondary</h6> <h3>Ages 11-16</h3> <div class="desc"><a class="btn btn-md btn-light btn-rounded font-weight-bold" href="#"> <i class="fa fa-arrow-right ms-2 me-2 ps-3"></i></a></div> <p></p></div></div></div> I must be missing something.

We have a website where on certain pages, they want to show a secondary menu row. Our theme allows us in WordPress to create headers, with multiple menus, but we want to see if there is a way that with CSS, you can say "After class 'main-menu', place this Row". Sadly the theme allows us to place Blocks at the top, or after breadcrumbs, but not between the header and the breadcrumbs. So seeing if we can find a way to do it with CSS.

Ah I see. So it's just big text andon a bigger screen it goes outside the main body container, on a small window, it's allowed to go outside it, with the overflow disabled. Gotcha. Ta. Not poss with Abs Pos.

Yes tried this. https://nextbase.co.uk/dash-cams/322gw-dash-camå Look at this site. Not ours or an ad, but where I saw the idea. Bring the width in and you see the big text goes off the page. But there is nothing nudging a space to the right when it does it. How?! I don't think this uses Abs Pos tho. Sounds like that has good and bad points when it comes to this. Just assumed if you are positioning it like that, you can stop the horiz movement dead in it's tracks. From the sound of it, in this situ, not.

Mmmm I am happy to show a link. But I take it, with the Abs Pos, it makes life doubly difficult then? Right now we are doing it so the text goes off the left (no sliding going on), and on mobile, we either hide it, or just make it smaller so it doesn't quite reach the right side. Is it safe to assume with Abs Pos, you can't for example, make it BIG text, with -left Pos, and big enough to force the text OFF the page... but still preventing scrolling? Please confirm before I do share the link.

I've also had an issue with max-width: 100vw. Since the text is Absolute Positioned, and off the screen to the left, if on a phone I then increase the font size so it goes off the left, and off the right, the vw width at 100, actually causes a line, or it to stop before the edge of the screen. So there is no one size fits all. Is it that you can't set the overflow-x hidden and 100vw to the element that is going off the screen, or do you have to contain that in an outer DIV? I just don't see a full proof way to do it, but have see website that DO do it. Again, won't post as unsure if it is deemed as advertising.

Because I didn't know that would be a problem. I can see the white background forces the layer over the blue bar. But of course, if the background has an image, I have nowhere to go.

Am I allowed to post the actual website where this is happening on here, so you can see it in total context? I didn't want to post, if it is seen as advertising.

What if it is on a background image?

Indeed, specially when the website doesn't email you an alert to say a kind stranger has replied.

It does the same thing if I set the font to Avenir as well.

https://jsfiddle.net/simonml/jub438L5/1/ This is kind of it. But what happens is that if I apply the overflow to the body tag, it affects other things like images that are in containers wtih curved clip bottoms. The image then moves down. So it has to be assigned to the container of the item in question, but when I apply the code, and use the 'Geomanist' font, it seems to clip the text. This happens when I apply it to the Div itself.

We want to push some very large, like 11em font text off the screen. It's fine off to the left, no scroll. But when it goes off the right, ona. mobile, the entire browser will shift across, to reveal the rest of the text. How do you stop that? overflow-x: hidden; doesn't do it. Simon

Yes, so how is that achieved?