MichGlad

The fade in AND out should work if you separate the two states kind of like this:
/*original state*/
.image-block{
  transition: .5s;
}
/*hover state*/
.image-block:hover {
  opacity: 0.6;
}
 
Maybe this helps you as well: 
 

Hey guys :)
I made my portfolio on a 4k display with a scaling factor of 175% in the windows 10 display settings* - no browser zoom. On that display, it looks like I want it to look (look at image 1). When I look at it on a 1920px display with a zoom of 100% it looks quite similar, though a little bit bigger.
But when I saw it on a 1920px laptop screen that was on 125% scaling during a portfolio review, the proportions of the text and images were way too large while the white space was too small (look at image 2 - imagine this being full screen 🙈).
   *If it is unclear what I mean by the scaling factor, I mean this: https://youtu.be/t9xIbkD6XjQ?t=30
 
What do I do in such a case?
I cannot decide the screen size of the HR person I send the portfolio to, so it should look good on every screen size, no matter if 4k or 1920px, and no matter the windows scaling factor (at least it is quite normal to have a scaling of 125% on a 1920 laptop screen and 150-175% on a 4k display).
Is it possible & smart to set a zoom level of the browser depending on the screen size and windows zoom level?
Or can I add additional breakpoints?
 
Thank you so much for your support in advance! :D
 
Image 1 (on 4k full screen):

Image 2 (looks terrible on a laptop in full screen):

Dear Squarespace Developement Team,
For the love of all things web design - PLEASE rectify the image/media file management for BOTH designers who help SELL your service and for those who manage their own sites.  We have other options and while I have helped sell to and set up small business websites via Squarespace - this past week I was in a situation where I could have really leveraged Squarespace to a room of emerging artist learning how to build their own websites, and because image/media file management is SO crucial and can be a HUGE time suck to contend with - preventing artist from making art because they are wasting precious hours trying to organize their web presence - I DID NOT recommend Squarespace. Instead, WixPix became the recommended website host to about 1,500 students in this business course... They have a file management system on the backend of their platform... The fact this has not been addressed in my time as a customer baffles me. There are a lot of important devevlopments and very grateful for the ones made around eCommerce, but even for eCommerce image file management is CRUCIAL. It's literally dreadful when a client needs a 100+ product images updated and REQUIRE somehow removing the outdated images so they don't confuse the customer.
This should be addressed, must be a top level feature, and if you don't have the people on your team capable of making it possible - hire someone who can.
Thank you.

Couldn't agree more, it's ludicrous that in 2021 you can't manage or download your files. Total joke!
Please @Squarespace Guru help! 

Thank you @tuanphan :)

I found a solution to my problem
HTML code block:
<div class="iframeContentCenter"> <iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="414" height="882" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe> </div> Custom CSS:
/*iframe position*/ .iframeContentCenter{ width: 414px; margin: auto; border-style: none; height: 100%; display: block; }