Bespoke Box Thumb

[Katie Sure]

Hi
I have a specific client requirement which i think the ‘Box Thumb’ short code may be able to do but i would need bespoke css to change it slightly.

Is it possible to make the below short code have the faded image first which then when hovered over changes to the full colour image?

Like the below on the Perfect theme but would be the opposite way round: faded to full
With no box/border around the image and text in the middle of the box.

Box Thumb
Short Code : [boxthumb name=”name” url=”#” image=”image” target=”blank”]

As always thank you for your great help!

Katie

[Katie Sure]

New question…
If i use the Woodcraft theme is there a way to change the section 1 functionality:

[titlearea align=”center” title=”WHAT WE DO” titlelast=”” subtitle=”” titlecolor=”#282828″ titlelastcolor=”” seperatorcolor=”#f4bc16″]
[row_area]
[whatwedo image=”ADD IMAGE URL HERE” title=”STUDY ROOMS” url=”#” target=”_self”]
[whatwedo image=”ADD IMAGE URL HERE” title=”ROOF DESIGN” url=”#” target=”_self”]
[whatwedo image=”ADD IMAGE URL HERE” title=”BOOKCASE DESIGNS” url=”#” target=”_self”]
[whatwedo image=”ADD IMAGE URL HERE” title=”HOME FURNITURE” url=”#” target=”_self”]
[clear]
[/row_area]

I basically want the hover function to work the opposite way round?
All images with a yellow cover on images which removes to full colour image when hovered over?

Do you have bespoke CSS i can apply?

Your advice & help as always is greatly recieved, holding off installing the theme till we can have feedback on the above.

Thanks
Katie

[Sonl Sinha]

Hi,

Kindly show us your website URL so that we can assist further.

Regards,
Chris

[Katie Sure]

http://akaal-ltd.com/dev/

The section: What We Do

I just want the roll overs to work the opposite way round.

So the colour (yellow) is present on all boxes then removed when hover over?

Big thanks for your help 🙂

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

.serviceboxbg { background:#f4bc16 !important;}
.serviceboxbg:hover { background:none !important; border-color:#f4bc16 !important;}

Regards,
Chris

[Katie Sure]

Thanks Chris,

I’ve applied the css but the service box that it updates is further down the page and i don’t think the function layout will work correctly for an image.

I basically want to create 4 simple roll over boxes like on this website:

Under ‘BESPOKE KITCHENS AND INTERIORS’
https://www.bespokekitchendesign.co.uk/

Thanks again for your fantastic support, this is why we love using you guys 🙂

[Sonl Sinha]

Hi,

Kindly go to Appearance>>Theme Options>>Basic Settings>>Custom CSS Box:

Add this code there:

.whatwedo:hover .whatwedo-thumb img { opacity:1 !important;}
.whatwedo:hover .whatwedo-title { display:none !important;}

Regards,
Chris

[Author]

Posts