slow transition on hover

[senordeer]

Hello! This is just a general CSS question not specific to Genesis but I am using a Genesis theme so I hope it's okay to ask it here.

I have a slider set up here: http://nigarn.com

I have a white background that appears behind the post title on hover. I just want to slow the transition of the white background on hover, I have tried a million different things and currently am using:

.sp-slide:hover .sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #000;
background:url(http://www.nigarn.com/wp-content/uploads/2016/10/slide-background-2-5.png)no-repeat center top;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}

but it is not slowing the hover at all. Any suggestions? As mentioned I know this is general CSS and not Genesis-specific but thought I would ask thanks!

http://nigarn.com

[William]

try something like this

img {
opacity: 1;
transition: all 0.5 ease;
}

img:hover {
opacity: 0.75
}

🙂

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[Author]

Posts