Text on hover shows even when you don't hover

Hello everyone,
my CSS was working fine when I last worked on my website 3 days ago... now I have this annoying bug that I can't seem to get around.
At the end of each of my porfolio's projets, I have a summary block to get easy access to similar projects. I have added CSS to get the titles to show on hover with a grey background. For some reason, today, the text shows all the time 😣.
My website is not online yet, here is the password: squarewebsites

Thank you in advance if you can take the time to check and help 🙏😊

13 hours ago, Leti said:

Hello everyone,
my CSS was working fine when I last worked on my website 3 days ago... now I have this annoying bug that I can't seem to get around.
At the end of each of my porfolio's projets, I have a summary block to get easy access to similar projects. I have added CSS to get the titles to show on hover with a grey background. For some reason, today, the text shows all the time 😣.
My website is not online yet, here is the password: squarewebsites

Thank you in advance if you can take the time to check and help 🙏😊

What is the website link?

Sorry, since I had to fill it to post the message, I thought it was showing...
Here is one project page for instance: https://www.pastekart.com/portfolio-projets-1/007-rapport-annuel-gestion-portefeuille
password: squarewebsites

46 minutes ago, Leti said:

Sorry, since I had to fill it to post the message, I thought it was showing...
Here is one project page for instance: https://www.pastekart.com/portfolio-projets-1/007-rapport-annuel-gestion-portefeuille
password: squarewebsites

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.fe-block-5b5cf051946f398ec348 .summary-item .summary-content {
    opacity: 0 !important;
}
.fe-block-5b5cf051946f398ec348 .summary-item:hover .summary-content {
    opacity: 1 !important;
}

Thank you! ...but since I have this block on each of my portfolio page and I am going to have a lot of them, I would rather find a solution that is not pointing to a specific block id 😣


my current CSS (if it helps) is:

@media screen and (min-width:800px) {
.summary-item {
  position: relative;
  img {
    transition: all .5s ease!important }
.summary-content {
  position: absolute;
  color: #fff!important;
  top: 50%;
  left: 50%;
  opacity: 0 !important;
  pointer-events: none;
  transition: all .5s ease;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%); }
.summary-thumbnail-container {
  margin-bottom: 0!important; }
.summary-title, .summary-metadata--primary, .summary-metadata--secondary, .summary-excerpt   {
  color: #fff!important;
  font-size: 32px !important;
  font-family: swear-display;
  font-style: oblique;
  text-align: center;
  line-height: 1em }}
.summary-item:hover {
  img {
    -webkit-filter: brightness(40%);
    filter: brightness(40%); }
.summary-content {
  opacity: 1 !important; }}}
/* pas de hover sur mobile */
@media screen and (max-width:767px) {
.summary-title {
  display: none; }}

Sorry, yesterday I had to install new hardware on my computer so I was offline all day 😉
Yes, it works!!!!!! so nice, thank you 🥰 You are the best

If you have a little time, I'd like to understand it better so maybe I can do it myself next time 😊
The body.collection id is pointing to the blog it calls thumbnails from, is that it?
And how did you find this id? I don't see it in the inspector? ah, wait, yes, I found it, I have to point to the text inside the thumbnail and it is in the styles. Good to know 👍

.collection-6593311d656a4b26729f90ca is Portfolio Page ID, it include List Page + Items

.view-item: target Portfolio Items only

I inspect page and find it (Right click on anywhere on page > Inspect > Find <body... and you will see collection in that tag