Portfolio item gallery excerpt show when hovering - image overlay problem - Support

Tagged: image overlay, portfolio items, z-index

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
January 19, 2016 at 10:25 pm #568181
jambrikp
Participant
Hey!

I have custom css code, but I have a little problem.
When I hover mouse to portfolio image the image overlay will be visible. It’s okay. But when I hover mouse to grid content (z-index 9999) the overlay go hidden. I would like that image overlay be visible when I hover to grid content on the portfolio image.
```
.avia_transform a .image-overlay {
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

article .grid-content {
    opacity: 0;
    display: none;
    text-align: center;
    height: 0px;
    padding: 20px;
    background-color: transparent !important;
    bottom: 0px;
}

article:hover .grid-content {
    display: block;
    opacity: 1;
    height: 110px;
    z-index: 9999;
    bottom: 110px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
```
Please test it, and help me. Thank you!

Best regards,
Peter
January 19, 2016 at 11:56 pm #568245
Andy
Inactive Moderator
Hi Peter!

try to increase height value of your last bit of code:
```
article:hover .grid-content {
height: 183px;
}
```
Regards,
Andy
January 20, 2016 at 1:01 am #568262
jambrikp
Participant
Thank you! It was a good idea :)
But the vertical-align and the transition dont work… why? Opacity change from 0 to 1 but transition dont work :/
```
article:hover .grid-content {
    display: block;
    opacity: 1;
    height: 234px;
    z-index: 9999;
    bottom: 234px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    vertical-align: middle !important;
}
```
Thank you
Peter
January 21, 2016 at 5:56 am #569159
Ismael
Moderator
Hey!

You should remove the display property and leave the opacity. The animation should work after that.
```
article .grid-content {
    opacity: 0;
    text-align: center;
    height: 0px;
    padding: 20px;
    background-color: transparent !important;
    bottom: 0px;
}

article:hover .grid-content {
    opacity: 1;
    height: 234px;
    z-index: 9999;
    bottom: 234px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    vertical-align: middle !important;
}
```
Regarding the height fix, you might need to add a few css media queries to adjust the height on different screen sizes.

Best regards,
Ismael
January 21, 2016 at 12:02 pm #569330
jambrikp
Participant
Hey Ismael!

Thanks :) I use this code now:
```
article .grid-content {
    opacity: 0;
    text-align: center;
    height: 239px;
    padding: 20px;
    background-color: rgba(255,255,255,0.7) !important;
    bottom: 239px;
}

article:hover .grid-content {
    opacity: 1;
    z-index: 9999;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
```
But I have a problem again, because If I remove display: none / block form the code I will have a gap below the image. The gap is the original space for portfolio excerpt. I use bottom: 239px to positioning the portfolio excerpt like an image overlay.

Please help me, thank you

Best regards
Peter
January 22, 2016 at 10:33 am #569883

Vinay
Inactive Moderator

Hey!

Please see the attached image is this the gap you are talking about?

It would be much easier and faster to resolve this issue if we can take a closer look please send us admin login access as a private content and permission to add css in enfold > general styling > quick css

Before that please remove any custom css you have added for this issue in child theme css and add it in enfold > general styling > quick css so we can access it.

Cheers!
Vinay

January 22, 2016 at 11:20 am #569905
jambrikp
Participant
Hi Vinay!

Yes, this is the gap! :)
I copied the code to quick css and removed from child css. :)

Thank you!
Peter
- This reply was modified 8 years, 11 months ago by jambrikp.
January 22, 2016 at 9:35 pm #570343
Vinay
Inactive Moderator
Hi!

~~We are working on your issue please be patient while we update the results soon.~~

We have made some slight modification to the css code please check the website now you get both the options when you hover
```
article .grid-content {
    opacity: 0;
    text-align: center;
    padding: 20px;
    background-color: rgba(255,255,255,0.7) !important;
width:100%;
text-align:center;
position: absolute;    
    bottom: -0%;
left:0%;
    transform:translateXY(-50%,-50%);
    
}

article:hover .grid-content {
    opacity: 1;
    z-index: 9999;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
```
Regards,
Vinay
- This reply was modified 8 years, 11 months ago by Vinay.
January 24, 2016 at 3:17 pm #570797

jambrikp
Participant

Wow, thank you! You are the best support team :D

January 24, 2016 at 7:40 pm #570862

Basilis
Inactive Moderator

Hi!

We are glad you got that short out!
Btw, If you have a moment, I would very much appreciate if you could quickly rate the Enfold to themeforest, which wiII heIp us keep the deveIopment up!

Please do not hesitate to contact us, if you do need anything else.

Best regards,
Basilis
Author

Posts