Introduction Above List –> Mouseover Effect Edit

[bkopke]

Hi – we are using SEA’s AIR theme for WordPress and had a question.

Using a page’s “Introduction Above List” page template, there are six mouseover effects offered in a dropdown. Can you help with a little customization to one of these?

Is it possible to – for example – select “Filled Mask (Text Left)” from the mouseover effects, then apply CSS to modify?

Specifically, we want the title to appear on mouseover at the bottom of the featured image with a bar of background color behind. The idea being that – using the current options – we’re completely obscuring what’s being used to try and sell a product or service.

A visual of what we’re hoping to achieve can be viewed here: https://privatebin.support-tools.com/?05779cb50197d6d1#tEykyNe9ZeIgcBc+VNiCMPKwn8YdbzVyNzlGGh+AvAg=

[SeaTheme]

Hi there,
Welcome to SeaTheme forum.

Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

.grid-mask-boxed-left .grid-item-con-text, 
.grid-mask-filled-left .grid-item-con-text {
    left: 0;
    right: 0; 
    padding: 15px;
    -webkit-transform: initial;
    -moz-transform: initial;
    -ms-transform: initial;
    transform: initial;
    bottom: 0;
    top: auto;
    background-color: #fff;
}
.no-touchevents .grid-item .grid-item-con:hover .grid-item-con-text, 
.touchevents .grid-item .grid-item-con.air-hover .grid-item-con-text {
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
}
.grid-mask-filled-left .grid-item-con:after {
   background-color: transparent;
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[bkopke]

That worked great – thank you!

[Author]

Posts