mrpower

@tuanphan this works a treat. How would you animate/transition the change of background? I would like a smooth opacity change reveal. The bottom of the page here will give an example of what I'm trying to achieve. The image just flashes up I would like to smoothly bring it in.

Thats the topic I've been searching for all day. thanks!!!

Hi I had this working a while back but accidentally deleted the code. To get it working it used a :not tag in css. However, whatever I target I can't get it to work. I'm trying to have the mix-blend-mode of difference on my menu at all time expect for when the menu is open in mobile. Could anyone remind me what I need to target? It was something like .header:not(.header-menu-bkg) { mix-blend-mode: difference; } But I can't get it to work. I know it's something very simple. mrwatt.co.uk for ref

Thanks

Thanks this helped me source the error in my custom CSS

My header links and logo have disappeared. Well they are 'there' but not visible. Cursor changes and can click. What's going on? Site Url: mrwatt.co.uk

Hi, I have the following. 2 images, one gif (.running), one still (.paused). Headline within an animated div that blinks. I have the following code that works a treat for the images. (click the image, hide it and show the other) However, I want to use the same click events to also change the divs animation play state, from running to paused, but I'm missing something when calling the div and it doesn't work. I'm a javascript novice. Could I please get some advice on where I'm going wrong? Url mrwatt.co.uk <script> const workmix = document.getElementById("#block-yui_3_17_2_1_1701277236499_87692"); $(function() { $('.paused').hide(); $('.running').click(function() { $('.running').hide(); $('.paused').show(); workmix.style.animationPlayState = "paused"; }); if ($('.running').data("clicked", true)) { $('.paused').click(function() { $('.running').show(); $('.paused').hide(); workmix.style.animationPlayState = "running"; }); } }); </script> #block-yui_3_17_2_1_1701277236499_87692 { animation: blinker 4s step-start infinite; } @keyframes blinker { 38%, 58%, 78% { opacity: 0; } 28%, 48%, 68% { opacity: 1; } } <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-yui_3_17_2_1_1701277236499_87692"><div class="sqs-block-content"> <div class="sqs-html-content"> <div class="sqsrte-scaled-text-container loaded"><span class="sqsrte-scaled-text" style="font-size: 266.4px;"><h1 style="white-space:pre-wrap;">Work mix</h1></span></div> </div> </div> <div class="introLoaderTape"> <img class="tape running" src="https://mrwatt.co.uk/s/Cassette_mov_128.gif" width="100%"/> <img class="tape paused" src="https://mrwatt.co.uk/s/Cassette_mov_128_still.gif" width="100%"/> </div>

Hi, I'm overlaying 2 videos over one another. These videos have an alpha channel and I've properly encoded them to do so. Raw files work a treat. This is my code which I have inserted in to a code block: <video class="tape" width="100%" autoplay loop muted playsinline> <source src="https://mrwatt.co.uk/s/Cassette_hevc.mov" type="video/mp4"> <source src="https://mrwatt.co.uk/s/Cassette_webm.webm" type="video/webm"> </video> However, I'm having issues in terms of transparency with different browsers, such as Chrome and Edge Issue: The code above plays absolutely fine, with no problems, across most the popular browsers on my Macbook and iOS devices (Safari, Chrome, Firefox). However, on Windows PC we have either a lack of transparency or no video at all. I experimented using the webm version alone and this fixes everything on Windows PC, but as there is no hevc video the webm doesn't work on Mac. So it's clear to me that the browsers aren't pulling the format it requires. Can anyone shed some light as to where I'm going wrong? I also tried to include the codec tag to but with no avail, as in: <video class="tape" width="100%" autoplay loop muted playsinline> <source src="https://mrwatt.co.uk/s/Cassette_hevc.mov" type="video/mp4;" codec="hvc1"> <source src="https://mrwatt.co.uk/s/Cassette_webm.webm" type="video/webm;" codec="vp9"> </video> Thanks Here's my site to see it in effect: mrwatt.co.uk

SOLVED: Removed the custom code from the header and included it in the footer. <!---SVG LOGO---> <style> /*Hide PNG Logo*/ .header-title-logo img, .header-mobile-logo img{ visibility: hidden !important; } /*Replace with SVG Logo*/ div.header-title-logo a, .header-mobile-logo a{ content: url('/file.svg') !important; max-width: 290px; margin-left: auto; margin-right: auto; </style>

Hi, I have inputted an SVG logo in my header, however only on certain pages the "visibility: hidden !important;" code isn't hiding the original PNG logo. It seems there's some CSS "content: url(…)" that is overwriting the visibility hidden. Resulting in 2 overlapping logos. This content code is tagged as !important and it's proving difficult to target. How do I hide the image here so only the svg shows? Site: https://mrwatt.co.uk/work (it works here) Site issue: https://mrwatt.co.uk/puregym-pride-2019 (overlapping logo) password: 2121 Thanks

Thanks for the response @creedon, it could be this but find it strange how pngs would be malfunctioning if your iPhone doesn't have the most up-to-date software. Feel that's the most basic of elements to make sure it's displaying correctly across all versions of any software. I'll run with it though and hope others viewing have the most up to date iPhone software. Thanks

Hi, can you please help? My images have a weird ghosting or transparency issue only noticed on my iPhone. My URL is provided. I have set the design color overlays to off 0 transparency but it's not working this is only in chrome. The images attached shows my issue, sometimes it works sometimes it doesn't: Chrome its all wrong: . Safari is wrong too, but only partly: Any help appreciated, Asap as this doesn't look good when applying for design roles. Thanks