Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to set the hover result as the prime result Reply To: How to set the hover result as the prime result

#282226
mrroy44
Participant

This is the CSS that comes with the plugin. I’ve tried to fix it by removing the opacity element in “.hero-box.hero-box-effect-sadie p.hero-box-caption”, but it seems to have no effect. :


.hero-box.hero-box-effect-sadie .hero-box-text{width:100%;top:0;bottom:0;padding:30px}
.hero-box.hero-box-effect-sadie h3.hero-box-title{position:absolute;text-align:center;left:0;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.hero-box.hero-box-effect-sadie .hero-box-img,.hero-box.hero-box-effect-sadie img{opacity:.9}
.hero-box.hero-box-effect-sadie p.hero-box-caption{position:absolute;text-align:center;left:0;right:0;bottom:40px;opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}

.hero-box.hero-box-effect-sadie:hover .hero-box-img,.hero-box.hero-box-effect-sadie:hover img{opacity:.7}
.hero-box.hero-box-effect-sadie:hover p.hero-box-caption{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
.hero-box.hero-box-effect-sadie:hover h3.hero-box-title{-webkit-transform:translateY(calc(-50% - 30px));transform:translateY(calc(-50% - 30px))}