In need of CSS help

[ahd904]

Dear 7th Queen support,

Hello.

I am little in need of help for finding the correct CSS apply.

If you would please look at the attached image, i am looking for a function that can build
1) a grid format (as shown in the picture)
2) an image with click on link to a specific url
3) a white text on each image
4) on hover function: the image will blur or the opacity will go low so the text looks more visible (or readable)

Do you have any idea that i can form this job easier within the functions that are included in the KLEO theme ?

I am trying to find out some easier ways without JS.

Or if you let me know of any CSS i can apply to achieve this, it would be nice.

(a sample i am trying to copy is from the http://www.airbnb.com site you would see a similar grid format with text hover on images)

For your reference my website is http://www.ibyi.co.kr

Thank you for the support in advance.

Attachments:

You must be logged in to view attached files.

[Radu]

Please create a dummy account i cannot view your site.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[ahd904]

Hello Radu,

I have closed the website since i was busy constructing.
I now have opened it.

I have used grid element and hover effect on the above elements but could you tell me of a way that i can maintain the text hover on the images to stay in white ? not going through css transition ?

I only want the images to stay darker and the text to stay white on hover.

Thank you for the support.

please try my website again.
http://www.ibyi.co.kr/

[Radu]

Hello,

Try with this css

COPY CODE

.vc_grid-item-mini .vc_gitem-zone-mini a.vc_gitem-link {color:#FFF !important;}
div.vc_gitem-zone.vc_gitem-zone-b.hoverimage.vc-gitem-zone-height-mode-auto.vc_gitem-is-link img:hover{ display:none !important;}

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts