This topic has 3 replies, 2 voices, and was last updated 9 years by 
-
-
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.
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 solutionHello 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/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
The forum ‘KLEO’ is closed to new topics and replies.
