Services type B overlay

Hello,

I would like to have an overlay when moving my mouse on top of each service. A bit like what happen with “Sydney Portofolio” apart I still want to have the name of the service visible at all time.
I just want a blue overlay when moving my mouse with a “+” appearing .

Cheers

Hello there,

If I can catch your objective clearly, you would add the following custom CSS code into Appearance > Customize > Additional CSS:


.sydney_services_b_widget .list-item:hover{
  position: relative;
}

.sydney_services_b_widget .list-item:hover:after{
  content: '';
  color: #fff;
  display: block;
  width: 100%; 
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0.5;
  background-color: #0c48f5; 
  -webkit-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
  -moz-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
  animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25); 
}  

.sydney_services_b_widget .list-item:hover:before{
  content: '+';
  line-height: 1px;
  position: absolute;
  z-index: 3;
  display: inline;
  top: 50%;
  left: -webkit-calc(50% - 10px);
  left: -moz-calc(50% - 10px);
  left: calc(50% - 10px);
  color: #fff;
  font-size: 30px;
  -webkit-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
  -moz-animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25);
  animation: pop-scale 0.5s 1 cubic-bezier(0.15, 0.85, 0.35, 1.25); 
}  

Regards,
Kharis

Hello Kharis,

Thank you for looking at this problem.

Your code somehow works but it’s not as neat as in the CV display nor the project display.

I have 3 problems with this solution:
*I would like this hover overlay to be present only in one page of the website (I use also the same widget in the front page but with “parent services”, and don’t want this overlay).
*The hover overlay don’t fit the entire picture
*the hover overlay is not clickable like it is on the CV display and project display

Thank you again

Regards

Hello there,

Please share the page URL where I can see your services. Make sure the code remains, so I can check and correct it.

Regards,
Kharis

Hello Kharis,

The site is in maintenance mode, only authorised user could see it. Please send me your email then I will give you access.

Best regards

Arthur

Here is my email: kharisblank@gmail.com

Informations sent.

Cheers